<!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>玉米商城 </li> <li><a href="">链接A </a></li> <li><a href="">链接B </a></li> <li><a href="">链接C </a></li> <li><a href="">链接D </a></li> </ul> <!--最上右边--> <ul class="top-right"> <li><a href="">登录 </a></li> <li><a href="">注册 </a></li> <li><a href="">消息 </a></li> <li><a href="">购物车 </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> ©为发烧而生</div> </div> </body> </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{ } /**/
图片生成器：https://dummyimage.com/
点开其中的图片，在浏览器栏，进行图片大小的修改，图片大小后面是颜色，然后右键下面的图片，点击复制图像地址，即可生成指定大小颜色的文件图片。
marign 0 auto；(居中)只有在block的级别下，才能成功。