小米商城大框架布局

abstract：布局 html 部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-

布局 html 部分

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</header>

</div>

</div>

</div>

</div>

</div>

<div class="content-phone-0"

style="margin-right:12.7px; margin-top: 12.7px; background: url(static/images/buy/家电AD2.jpg)"></div>

</div>

</div>

<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>

<a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>

<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>

<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd><a href="">授权体验店</a></dd>

</dl>

<dl>

<dd><a href="">投资者关系</a></dd>

</dl>

<dl>

</dl>

<dl>

</dl>

<p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>

</div>

</div>

</div>

<ul>

<li>小米天猫店<span></span></li>

<li>Select Region</li>

</ul>

</div>

京ICP证110507号

<a href="">京ICP备10046444号</a>

<a href="">京公网安备11010802020134号</a>

<br>

违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

</div>

</div>

探索黑科技，小米为发烧而生！

</div>

</body>

</html>

css部分

margin: 0;

padding: 0;

}

li{

list-style: none;

}

text-decoration: none;

color: #ccc;

cursor: pointer;

}

.clearfix::before,

.clearfix::after{

content: '';

display: block;

clear: both;

}

.clear{

clear: both;

}

/* 头部 */

.header{

width: 100%;

height: 40px;

background: #333;

}

.header-nav{

width: 1226px;

height: 40px;

background: #ccc;

margin: 0 auto;

}

/* 主体 */

.content{

width: 1226px;

margin: 0 auto;

}

.content-nav{

background: #ccc;

height: 90px;

margin: 10px auto;

}

.content-pic{

height: 480px;

margin: 10px auto;

}

.content-pic .content-pic-l{

width: 246px;

height: 480px;

background: #ccc;

float: left;

}

.content-pic .content-pic-r{

width: 980px;

height: 480px;

background: blue;

float: left;

}

.content-pic-ul{

height: 180px;

margin: 10px auto;

}

.content-pic-ul .content-pic-ul-1{

width: 235px;

background: #5f5750;

height: 170px;

margin-right: 13px;

float: left;

}

.content-pic-ul .content-pic-ul-0{

width: 317px;

height: 170px;

float: left;

}

/* 小米闪购 */

.content-shop{

height: 340px;

margin: 10px auto;

}

.content-shop-1{

width: 235px;

background: #ccc;

height: 340px;

float: left;

}

.content-shop div:nth-of-type(1){

border-top: 1px solid red;

}

.content-shop div:nth-of-type(2){

border-top: 1px solid blue;

}

.content-shop div:nth-of-type(3){

border-top: 1px solid coral;

}

.content-shop div:nth-of-type(4){

border-top: 1px solid fuchsia;

}

.content-shop div:nth-of-type(5){

border-top: 1px solid green;

}

.content-img{

background: #ccc;

height: 100px;

margin: 10px auto;

}

.content-ul{

background: #ccc;

height: 80px;

margin: 10px auto;

}

.content-phone{

height: 614px;

margin: 10px auto;

}

.content-phone-l{

height: 614px;

width: 234px;

background: url(../images/buy/手机AD.jpg);

float: left;

margin-right: 12px;

}

.content-phone-r{

height: 614px;

width: 980px;

float: left;

}

.content-phone-r div{

width: 235px;

height: 300px;

background: #ccc;

float: left;

}

.content-phone-0,.content-phone-1{

height: 300px;

width: 235px;

background: #ccc;

float: left;

}

.content-phone-2{

float: left;

}

.content-phone-2-t,

.content-phone-2-b{

height: 145px;

width: 235px;

background: #ccc;

}

.content-phone-2-b

{

margin-top: 10px;

}

.content-phone-0:first-child{

background: url(../images/buy/智能AD1.jpg);

}

.content-phone div:nth-of-type(6){

background: url(../images/buy/智能AD2.jpg)

}

/* 底部 */

.footer{

width: 1226px;

height: 100px;

margin: 10px auto;

}

.footer-top_li_1{

width: 1226px;

height: 80px;

line-height: 80px;

text-align: center;

}

.footer-top_li_1 a{

font-size: 16px;

color: #616161;

font-weight: 300;

}

.footer-top_li_1 a:hover{

color: #ff6700;

}

.footer-top_li_1 a i{

font-size: 20px;

margin-right: 10px;

}

.footer-top_li_1 span{

color: #616161;

font-size: 20px;

border-left: 1px solid #e0e0e0;

margin: 0 56px;

}

.separate{

display: inline-block;

width: 1226px;

border-bottom: 1px solid #e0e0e0;

}

.footer-top_li_2{

width: 1226px;

height: 100px;

margin: 40px 0;

}

.footer-top_li_a dl{

float: left;

display: block;

width: 160px;

}

.footer-top_li_a dl dt{

font-size: 14px;

line-height: 14px;

margin-bottom: 26px;

}

.footer-top_li_a dl dd{

font-size: 12px;

line-height: 18px;

color: #ccc;

margin-top: 10px;

}

.footer-top_li_a dl dd a{

color: #757575;

}

.footer-top_li_a dl dd a:hover{

color: #ff6700;

}

.footer-top_li_a .connect{

width: 258px;

height: 112px;

float: right;

border-left: 1px solid #e0e0e0;

text-align: center;

}

.footer-top_li_a .connect .telephone{

color: #ff6700;

font-size: 22px;

margin: 0 5px;

line-height: 22px;

}

.footer-top_li_a .connect .time{

color: #616161;

margin: 0 16px;

font-size: 12px;

}

.footer-top_li_a .connect button{

width: 118px;

height: 28px;

font-size: 12px;

line-height: 28px;

border: 1px solid #ff6700;

margin-top: 20px;

color: #ff6700;

background: #fff;

}

.footer-top_li_a .connect button:hover{

background: #ff6700;

color: #fff;

}

.footer-bottom_li_1,.footer-bottom_li_2, .footer-bottom_li_3{

float: left;

}

.footer-bottom_li_a{

height: 19px;

width: 640px;

}

.footer-bottom_li_a li:hover{

color: #ff6700;

}

.footer-bottom_li_a li{

font-size: 12px;

float: left;

color: #757575;

}

.footer-bottom_li_a li span{

height: 10px;

border-left: 1px solid #b0b0b0;

margin: 0 3px;

}

.footer-bottom_li_b{

width: 640px;

color: #b0b0b0;

font-size: 12px;

margin-bottom: 10px;

}

.footer-bottom_li_b a:hover{

color: #ef3a3b;

}

.footer-bottom_li_3{

margin-left: 69px;

margin-bottom: 30px;

}

.footer-bottom_li_3 img{

width: 83px;

}

.footer-bottom_li_4{

text-align: center;

margin-top: 15px;

font-family: "楷体";

font-size: 24px;

color: #ccc;

}

Correcting teacher：西门大官人Correction time：2019-04-08 09:23:55
Teacher's summary：代码比较规范（除了格式），最好上传一下程序的运行效果图。

小米商城大框架布局

Popular Entries