zoukankan html css js c++ java

python-玉米（小米）商城作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="小米.css">
</head>

<body>
<!--最上边-->

<div class="up">
    <div class="top">
        <!--最上左边-->
        <ul class="top-left">
            <li>玉米商城&nbsp;</li>
            <li><a href="">链接A&nbsp;</a></li>
            <li><a href="">链接B&nbsp;</a></li>
            <li><a href="">链接C&nbsp;</a></li>
            <li><a href="">链接D&nbsp;</a></li>
        </ul>
        <!--最上右边-->
        <ul class="top-right">
            <li><a href="">登录&nbsp;</a></li>
            <li><a href="">注册&nbsp;</a></li>
            <li><a href="">消息&nbsp;</a></li>
            <li><a href="">购物车&nbsp;</a></li>

        </ul>
    </div>
    <!--top2-->
    <div class="top2">
        <ul class="top2-left">
            <li class="lmi"></li>
            <li><span class="sp">55*55</span></li>
            <li><a href="">玉米手机</a></li>
            <li><a href="">苞米</a></li>
            <li><a href="">红米</a></li>
            <li><a href="">黑米</a></li>
            <li><a href="">大米</a></li>
            <li><a href="">小米</a></li>
            <li><a href="">米米电脑</a></li>
            <li><a href="">米米汽车</a></li>
        </ul>
        <div class="top2-right">
            <!--<input  class="text2" name = 'ss'type= 'submit' value="搜索">-->
            <input class="text1" name ='cat' type="text" value="1">
                    <input  class="text2" name = 'ss'type= 'submit' value="搜索">
            </div>

         </div>

    <!--top3-->
        <div>
        <!--top3-left-->
        <div class="top3-left">
            <ul>
            <li>手机 电话卡</li>
            <li>电视 盒子</li>
            <li>笔记本</li>
            <li>智能 家电</li>
            <li>健康 家具</li>
            <li>出行 儿童</li>
            <li>路由器 手机配件</li>
            <li>移动电源 插线板</li>
            <li>耳机 音箱</li>
            <li>生活 米兔</li>
            </ul>
        </div>

            <div class="top3-right">

                <!--<img src="https://dummyimage.com/992x460/33FFFF" alt="">-->
            </div>

         <div class="top4">

             <div class="top4-1" id="top4-11"></div>
             <div class="top4-2"></div>
             <div class="top4-3"></div>
             <div class="top4-4"></div>
             </div>

    <!--top5-->

         <div class="top5">
             <p>限时闪购</p>

         </div>
        </div>
<!--top6-->
        <ul class="top6">
            <li class="top6-1"></li>
            <li class="top6-2"></li>
            <li class="top6-3"></li>
            <li class="top6-4"></li>
            <li class="top6-5"></li>

        </ul>


</div>

<!--below-->
<div class="below">
    <div class="top7">
        <p>家电</p>
    </div>

    <div class="top8-left"> </div>
    <ul class="top8-right-top1">
        <!--<li class="top8-right-top1">-->
            <div class="top8-11"></div>
            <p>商品名称</p>
            <p>1999元</p>
        <!--</li>-->

    </ul>
    <ul class="top8-right-top2">
        <!--<li class="top8-right-top1">-->
            <div class="top8-12"></div>
            <p>商品名称</p>
            <p>1999元</p>
        <!--</li>-->

    </ul>
    <ul class="top8-right-top3">
        <!--<li class="top8-right-top1">-->
            <div class="top8-13"></div>
            <p>商品名称</p>
            <p>1999元</p>
        <!--</li>-->
        </ul>
    <ul class="top8-right-top4">
        <!--<li class="top8-right-top1">-->
            <div class="top8-14"></div>
            <p>商品名称</p>
            <p>1999元</p>
        <!--</li>-->
    </ul>

    <ul class="top8-right-top5">
        <!--<li class="top8-right-top1">-->
            <div class="top8-15"></div>
            <p>商品名称</p>
            <p>1999元</p>
        <!--</li>-->
    </ul>

    <ul class="top8-right-top6">
        <!--<li class="top8-right-top1">-->
            <div class="top8-16"></div>
            <p>商品名称</p>
            <p>1999元</p>
        <!--</li>-->
    </ul>

    <ul class="top8-right-top7">
        <!--<li class="top8-right-top1">-->
            <div class="top8-17"></div>
            <p>商品名称</p>
            <p>1999元</p>
        <!--</li>-->
    </ul>

    <ul class="top8-right-top8">
        <!--<li class="top8-right-top1">-->
            <div class="top8-18"></div>
            <p>商品名称</p>
            <p>1999元</p>
        <!--</li>-->
    </ul>


<!--top9-->
<div class="top9">
    热评商品
</div>

<!--top10-->
    <!--<div class="top10-0">-->
    <div class="top10">
    <ul class="top10-1">
        <div class="top10-1-1"></div>
        <p class="top10-text1">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
        <a href="">来源于喷子大大的评价 </a>
        <span > <strong>玉米插线板 | </strong></span>
        <span id="s2-1"> 49</span>

    </ul>

    <ul class="top10-2">
        <div class="top10-2-1"></div>
                <p class="top10-text2">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
                <a href="">来源于喷子大大的评价</a>
        <span > <strong>玉米插线板 | </strong></span>
        <span id="s2-2"> 49</span>
    </ul>

    <ul class="top10-3">
        <div class="top10-3-1"></div>
                <p class="top10-text3">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
                <a href="">来源于喷子大大的评价</a>
        <span > <strong>玉米插线板 | </strong></span>
        <span id="s2-3"> 49</span>
    </ul>

    <ul class="top10-4">
        <div class="top10-4-1"></div>
                <p class="top10-text4">东西真心不错,用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</p>
                <a href="">来源于喷子大大的评价</a>
        <span > <strong>玉米插线板 | </strong></span>
        <span id="s2-4"> 49</span>


    </ul>
    </div>

    <div class="top11">
        <div class="yuyue">预约维修</div>
        <div>|</div>
        <div>7天无理由退货</div>
        <div>|</div>
        <div>15天免费换货</div>
        <div>|</div>
        <div>满150包邮</div>
        <div>|</div>
        <div>520余家售后网点</div>


    </div>

<!--top12-->
    <div class="top12">
        <hr>
        &copy;为发烧而生</div>

</div>


</body>

</html>

html

* {
    margin: 0;
    padding: 0;
}

.up {
     100%;
    height:50%;
    background: white;

    /*float: left;*/
    /*margin-bottom: 10px;*/
    /*overflow: hidden;*/
    padding-bottom: 330px;
    /*margin-left: 80px;*/
}
.top {
     100%;
    background-color: black;
    /*float: left;*/
    /*height: 25px;*/
    list-style: none;
    display: inline-block;
    color: white;
}
.top-left{
    margin-left: 80px;
    /* 100%;*/
    /*background-color: black;*/
    float: left;
}
.top li{
    display: inline-block;
    color: white;
}
.top a{
    color: white;
    text-decoration-line: none;

}

.top a:hover{
    color: red;
}
/*最上右边*/
.top-right{
    margin-right: 80px;
    /* 100%;*/
    /*background-color: black;*/
    float: right;}


/*top2*/

.top2-left li{
    float: left;
    display: inline-block;
    /*margin-left: 40px;*/
    list-style: none;
    font-size: small;
    /*margin: 5px;*/
    /*height: 55px;*/
    /*margin: 0 auto;*/
}
/*.sp{*/
    /*margin: 10px;*/
    /*height: 55px;*/
    /*display: inline-block;*/
/*}*/

    /*图片*/
    
/*.mi {*/
    /* 142px;*/
    /*height: 55px;*/
    /*position: relative;*/
    /*top: 0;*/
    /*left: 40px;*/
/*}*/

.top2-left a ,.sp{
    /*margin: 5px;*/
    /*margin-top: 10px;*/
    /*margin-bottom: 5px;*/
    /*height: 55px;*/
    display: inline-block;
    /*margin: 0 auto;*/
    text-decoration-line: none;
    text-align: center;
    line-height: 55px;
    margin-right: 5px;
}

.top2-left a:hover{
    color: green;
}
.sp{
    margin-left: 30px;
    margin-right: 30px;
}


.lmi{
     55px;
    height: 55px;
    background-image: url("mi.jpg");
    background-position: left -111px top 250px ;
    margin-left: 80px;
    /*clear: left;*/

}

/*top2-right*/
.top-right input{
    /*font-size: large;*/
    /*float: right;*/
}

.text1,.text2{
    margin-top: 10px;
    /*border: 1px indianred solid;*/
}


.text2  {
    /*display: inline-block;*/
    float: right;
    height: 29px;

    margin-right: -173px;
    /*height: 25px;*/
    /*margin-right: 60px;*/
    /*margin-right: 50px;*/
    /*float: right;*/
    /*margin-left: 0px;*/
    /*margin-left: -10px;*/

}

.text1{
    height: 25px;
    float:right ;
    margin-right: 80px;
    /*margin-right: -10px;*/

}
.top3-left {
    /*clear: both;*/
    font-size: small;
}

/*top3*/
/*top3-left*/
.top3-left{
    /*margin: 0 auto;*/
     197px;
    background: darkslateblue;
    height: 460px;
    margin-left: -476px;
    margin-top:55px;
    display: inline-block;
    /*clear: both;*/

}

.top3-left li{
    /*text-align: center;*/
    float: left;                    /*此处有问题*/
    display: inline-block;
    clear: both;                     /*!!!!!!!!此处有问题*/
    /*margin-left: 40px;*/
    /*margin-top: 25px;*/
    margin: 14px auto;
    margin-left: 20px;
    /*overflow: hidden;*/
    /*background: blue;*/
}

.top3-right{
    /*content: url("https://dummyimage.com/992x460/33FFFF");*/
    /*margin-right: 0px;*/
     992px;
    height: 460px;
    float: right;
    display: inline-block;
    /*margin-top: 55px;*/
    background: url("https://dummyimage.com/992x460/33FFFF") 0px 0px;  /*css中可以使用backgroupd 来设置背景图片 */
    margin-top: -464px;
    /*margin-left: 278px;*/
    margin-right: 80px;
}
/*.top3-right img{*/
    /* 992px;*/
    /*height: 460px;*/
    /*float: left;*/
    /*!*display: inline-block;*!*/
    /*!*margin-top: 55px;*!*/
    /*clear: left;*/
    /*background: url("https://dummyimage.com/992x460/33FFFF") 0px 0px;  !*css中可以使用backgroupd 来设置背景图片 *!*/

    /* 80%;*/
/*}*/
/*top4*/
    /*top4-1*/
    .top4 {
        100%;
        height: 170px;
        /*display: inline-block;*/
        display: inline-block;

    }
    .top4 div{
        height: 170px;
        margin-top: 10px;
        margin-right: 3px;
    }
    .top4-1{
        display: inline-block;
        234px;
        float: left;
        background: no-repeat url("https://dummyimage.com/234x170/888888");
        margin-left: 80px;
    }
    #top4-11{
        margin-left: 80px;
    }
    .top4-2 {

         316px;
        float: left;
        background: no-repeat url("https://dummyimage.com/316x170/00008B");
    }
    .top4-3 {
         316px;
        float: left;
        background: no-repeat url("https://dummyimage.com/316x170/F08080");
    }.top4-4 {
         316px;
        float: left;
        background: no-repeat url("https://dummyimage.com/316x170/008866");
    }



/*top5*/
/*.top5   {*/
    /*margin-top: 10px;*/
/*}*/
.top5{
    height: 100px;
}
    .top5 p   {
        /*float: left;*/
        /*clear: both;*/     /*!!!!clear和float到底什么时候有差别*/
        /*100%;*/
        height: 100px;
        float: left;
        margin-left: 80px;
        margin-top: 20px;
        /*clear: both;*/
    }

/*top6*/
.top6{
    float: left;
    100%;
    height:340px;
    margin-top: -85px;
}
.top6 li{
    /*;*/
    display: inline-block;
    margin-top: 20px;
}

.top6-1 {
     234px;
    background: no-repeat url("https://dummyimage.com/234x340/77FFEE");
    height: 340px;
    display: inline-block;
    margin-left: 80px;
}

.top6-2 {
    background: no-repeat url("https://dummyimage.com/234x340/FF3333");
    height: 340px;
    display: inline-block;
     234px;
}
.top6-3 {
    background: no-repeat url("https://dummyimage.com/234x340/66DD00");
    height: 340px;
    display: inline-block;
     234px;
}
.top6-4 {
    background: no-repeat url("https://dummyimage.com/234x340/FF3333");
    height: 340px;
    display: inline-block;
     234px;
}
.top6-5 {
    background: no-repeat url("https://dummyimage.com/234x340/66DD00");
    height: 340px;
    display: inline-block;
     234px;
}


/*below*/
.below{
    height: 1300px;
     100%;
    background: gainsboro;
    padding-top: 1px;
    /*display: inline-block;*/
    /*float: left;*/
    /*margin-left: 80px;*/
}
/*top7*/
.top7  {
    /*float: left;*/
    /*margin-left: 80px;*/
    /*display: inline-block;*/
    /* 100%;*/
    /*margin-top: 19px;*/
    height: 100px;
    /*margin-left: 80px;*/
    /*margin-top:20px;*/

}
.top7 p {
    margin-left: 80px;
    margin-top: 20px;
    height: 100px;
    /*float: left;*/
}


/*top8*/
/*top8-left*/
.top8-left {
    background: no-repeat url("https://dummyimage.com/234x614/FFA488");
     234px;
    height: 614px;
    margin-left: 80px;
    margin-top: -66px;
    display: inline-block;

}
/*top8-right*/
.below>ul{
    227.5px;
    height: 300px;
    background: white;
    float: right;
    display: inline-block;
    /*margin-left: 5px;*/

    list-style: none;
}
.top8-right-top1{
    margin-right: 791px;
    margin-top: -66px;

}

.top8-right-top2{
    margin-right: 554px;
    margin-top: -618px;

}

.top8-right-top3{
    margin-right: 317px;
    margin-top: -618px;

}
.top8-right-top4{
    margin-right: 80px;
    margin-top: -618px;

}

.top8-right-top5{
    margin-right: 80px;
    margin-top: -305px;

}

.top8-right-top6{
    margin-right: 317px;
    margin-top: -305px;

}

.top8-right-top7{
    margin-right: 554px;
    margin-top: -305px;

}

.top8-right-top8{
    margin-right: 791px;
    margin-top: -305px;

}

.top8-right-top1 div{
    background: no-repeat url("https://dummyimage.com/150x150/FFA488");
    /* 150px;*/
    /*height: 150px;*/
    /*margin: 0 auto;*/
    /*如果想用margin居中属性的话，那么元素必须在块级别的标签中，而且顺序不能改，必须是0,auto*/
}

.top8-right-top3 div{
    background: no-repeat url("https://dummyimage.com/150x150/FFBB00");}

.top8-right-top4 div{
    background: no-repeat url("https://dummyimage.com/150x150/0000AA");}
.top8-right-top5 div{
    background: no-repeat url("https://dummyimage.com/150x150/FFA488");}

.top8-right-top6 div{
    background: no-repeat url("https://dummyimage.com/150x150/00DDDD");}

.top8-right-top7 div{
    background: no-repeat url("https://dummyimage.com/150x150/FFBB00");}

.top8-right-top8 div{
    background: no-repeat url("https://dummyimage.com/150x150/0000AA");}

ul>div {
     150px;
    height: 150px;
    margin: 0 auto;

}

.top8-right-top2 div{
    background: no-repeat url("https://dummyimage.com/150x150/00DDDD");
    /* 150px;*/
    /*height: 150px;*/
    /*margin: 0 auto;*/
    /*如果想用margin居中属性的话，那么元素必须在块级别的标签中，而且顺序不能改，必须是0,auto*/
}

ul>p {
    text-align: center;
    margin-top: 10px;
}
/*top9*/
.top9   {
    margin-left: 80px;
    margin-top: 20px;
}

/*.top10-0 {*/
    /* 100%;*/
    /*height:440px;*/
    /*background: yellow;*/
/*}*/

.top10>ul{
    display: inline-block;
    height:440px ;
     289px;
    background: snow;
    /*margin-left: 80px;*/
    margin-right: 9px;
}


.top10-1{
    /*height:440px ;*/
    /* 289px;*/
    /*background: white;*/
    margin-left: 80px;
    float: left;
    display: inline-block;
    /*margin-right: 10px;*/
    /*margin-right: 7px;*/
}
.top10-2{
    display: inline-block;
    /*margin-right: 7px;*/
    float: left;

}
.top10-3{
    /*margin-right: 10px;*/
    float: left;
    /*margin-right: 7px;*/
}
.top10-4{
    float: left;
}

.top10-1-1 {
     289px;
    height: 220px;
    background: url("https://dummyimage.com/289x220/00DDAA");
    /*margin-left: 80px;*/
}

.top10-2-1{
    background: url("https://dummyimage.com/289x220/00DDAA");
     289px;
    height: 220px;
}
.top10-3-1{
    background: url("https://dummyimage.com/289x220/00DDAA");
     289px;
    height: 220px;
}
.top10-4-1{
    background: url("https://dummyimage.com/289x220/00DDAA");
     289px;
    height: 220px;
}
.top10 >div{
     289px;
    height: 220px;
    /*background: url("https://dummyimage.com/289x220/00DDAA");*/
    margin-top: 10px;
}

.top10 p{
    text-align: justify;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
}
.top10 a:hover{
    /*margin-left: 30px;*/
    /*font-size: small;*/
    color: brown;
    /*text-decoration-line: none;*/
}

.top10 a {
        margin-left: 30px;
    font-size: small;
    text-decoration-line: none;      /*新大陆！！！！！！！！！！！！！两种状态，将上一个全打开，这个全关闭*/
    display: block;

    margin-top: 10px;
}

.top10 span{
    /*display: inline-block;*/
    /*float: left;*/
    /*margin-bottom: 10px;*/
    /*margin-left: 30px;*/
}

.top10 span{
    margin-left: 30px;
    margin-top: 10px;
    display: inline-block;
    font-size: large;
    /*text-align: left;*/
}

#s2-1,
#s2-2,
#s2-3,
#s2-4{
    margin-left: 5px;
    color: red;
}

/*top11*/
.top11{
    /*1182px;*/
     100%;
    display: inline-block;
    float: left;
    background: white;
    /*margin-left: 80px;*/
    /*margin-right: 80px;*/
    /*padding-left: 80px;*/
    margin-top: 18px;
    height: 100px;
    line-height: 100px;
    padding-left: 0px;
    padding-right:0px;
}

.top11 div{
    /*margin-top: 30px;*/
    float: left;
    margin-left:68px ;
    text-align: center;
    /*line-height: 100px;*/
}
.yuyue {
    text-indent: 80px;
}

/*top12*/
.top12{
    clear: both;
    text-align: center;
}
.top12:before{

}

/**/

css

图片生成器：https://dummyimage.com/

点开其中的图片，在浏览器栏，进行图片大小的修改，图片大小后面是颜色，然后右键下面的图片，点击复制图像地址，即可生成指定大小颜色的文件图片。

marign 0 auto；(居中)只有在block的级别下，才能成功。

查看全文

相关阅读:
关于JS系列题材
 《项目整体管理》提纲
 Linux使用java -jar启动会自动停止问题(如何使jar在linux上一直运行)
linux系统下查看端口被占用情况，并且杀掉进程
 CentOS7.X 下安装MySQL8.0（附文件）
CentOS7.x 防火墙命令总结
 Spring Data Elasticsearch自定义方法的各类约定、写法！
Mysql8.0数据库url时区问题，时间对应不上
 SpringBoot整合WebMagic一次踩坑记录：java.lang.IncompatibleClassChangeError: null
HttpClient抓取数据出现java.net.URISyntaxException: Expected authority at index 8: https://

原文地址：https://www.cnblogs.com/taozizainali/p/8578736.html