摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="sta
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="static/img/footlogo.png"> <link rel="stylesheet" type="text/css" href="static/css/style.css"> <link rel="stylesheet" type="text/css" href="static/font/css/font-awesome.min.css"> <script type="text/javascript" src="static/js/jquery-3.3.1.js"></script> <title>小米商城练习</title> </head> <body> <!-- 头部 --> <div> <div>头部导航</div> </div> <!-- 主体部分 --> <div> <div>主体顶部导航部分</div> <!-- 主体竖导航部分 --> <div> <div></div> <div></div> </div> <div></div> <!-- 栏目分类部分 --> <div> <div>栏目分类</div> <div style="background:url(static/img/midAD1.jpg)"></div> <div style="background:url(static/img/midAD2.jpg)"></div> <div style="background:url(static/img/midAD3.jpg)"></div> </div> <div></div> <!-- 小米闪购部分 --> <div> <h2 style="text-align:left;">小米闪购</h2> <div style="margin-right :12px; border-top:1px solid red;"></div> <div style="margin-right :12px; border-top:1px solid red;"></div> <div style="margin-right :12px; border-top:1px solid blue;"></div> <div style="margin-right :12px; border-top:1px solid green;"></div> <div style="border-top:1px solid red;"></div> </div> <div></div> <div style="background:url(static/img/longAD1.jpg)"></div> </div> <div > <!-- 手机商品列表部分 --> <div> <div> <h2 style="float:left;display:block;">手机</h2> <span style="float:right;">查看更多</span> </div> <div> <img src="static/img/buy/手机AD.jpg"> </div> <div> <div style="margin-right:12.5px;"></div> <div style="margin-right:12.5px;"></div> <div style="margin-right:12.5px;"></div> <div></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-top:10px;"></div> </div> </div> <div></div> <div style="background:url(static/img/longAD2.jpg)"></div> <div> <div> <h2 style="float:left;display:block;">智能</h2> <span style="float:right;">查看更多</span> </div> <div> <div><img src="static/img/buy/家电AD1.jpg"></div> <div style="margin-top:9px;"> <img src="static/img/buy/家电AD2.jpg"> </div> </div> <div> <div style="margin-right:12.5px;"></div> <div style="margin-right:12.5px;"></div> <div style="margin-right:12.5px;"></div> <div></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-top:10px;"> <div></div> <div style="margin-top:10px;"></div> </div> </div> </div> <div></div> <div style="background:url(static/img/longAD3.jpg)"></div> <div> <div> <h2 style="float:left;display:block;">家电</h2> <span style="float:right;">查看更多</span> </div> <div> <div><img src="static/img/buy/智能AD1.jpg"></div> <div style="margin-top:9px;"> <img src="static/img/buy/智能AD2.jpg"> </div> </div> <div> <div style="margin-right:12.5px;"></div> <div style="margin-right:12.5px;"></div> <div style="margin-right:12.5px;"></div> <div></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-right:12.5px; margin-top:11px;"></div> <div style="margin-top:10px;"> <div></div> <div style="margin-top:10px;"></div> </div> </div> </div> <div></div> <div style="background:url(static/img/longAD4.jpg)"></div> </div> <!-- 底部 --> <div> <div> <div> <!-- ************************顶部1****************************** --> <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-gift"></i>满150元包邮</a><span></span> <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a> </div> <span></span> <!-- **************************顶部2***************************** --> <div> <div> <dl> <dt>帮助中心</dt> <dd><a href="">账户管理</a></dd> <dd><a href="">购物指南</a></dd> <dd><a href="">订单操作</a></dd> </dl> <dl> <dt>服务支持</dt> <dd><a href="">售后政策</a></dd> <dd><a href="">自助服务</a></dd> <dd><a href="">相关下载</a></dd> </dl> <dl> <dt>线下门店</dt> <dd><a href="">小米之家</a></dd> <dd><a href="">服务网点</a></dd> <dd><a href="">授权体验店</a></dd> </dl> <dl> <dt>关于小米</dt> <dd><a href="">了解小米</a></dd> <dd><a href="">加入小米</a></dd> <dd><a href="">投资者关系</a></dd> </dl> <dl> <dt>关注我们</dt> <dd><a href="">新浪微博</a></dd> <dd><a href="">官网微博</a></dd> <dd><a href="">联系我们</a></dd> </dl> <dl> <dt>特色服务</dt> <dd><a href="">F码通道</a></dd> <dd><a href="">礼物码</a></dd> <dd><a href="">防伪查询</a></dd> </dl> </div> <div> <p>Feir-520-1314</p> <p>周一至周日 8:00-18:00<br>(仅收市话费)</p> <div ><button><span class="fa fa-commenting "></span> 联系客服</button></div> </div> </div> </div> <div></div> <!-- **************************页脚中部*********************************** --> <div > <div> <img src="static/img/footlogo.png"> </div> <div> <div> <ul> <li>小米商城<span></span></li> <li>MIUI<span></span></li> <li>米家<span></span></li> <li>米聊<span></span></li> <li>多看<span></span></li> <li>游戏<span></span></li> <li>路由器<span></span></li> <li>米粉卡<span></span></li> <li>政企服务<span></span></li> <li>小米天猫店<span></span></li> <li>隐私政策<span></span></li> <li>问题反馈<span></span></li> <li>Select Region</li> </ul> </div> <br> <div> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号 </a><br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </div> </div> <div> <img src="static/img/footericon1.png"> <img src="static/img/footericon2.png"> <img src="static/img/footericon3.png"> <img src="static/img/footericon4.png"> <img src="static/img/footericon5.png"> </div> </div> <div></div> <!-- ************************页脚底部************************************** --> <div >探索黑科技，小米为发烧而生！</div> </div> </div> </body> </html>
*{margin:0px;padding: 0px;}
a{text-decoration: none;}
li{list-style: none;float: left;cursor: pointer;}
.clear{clear: both;}
/*头部信息样式：*/
.head{width: 100%;background-color: #333333;}
.head_menu{width:1225px;
height: 30px;
border:1px solid #000;
background-color: #ccc;
margin:0px auto;
line-height: 30px;
text-align: center;
}
/*主体上部白色背景部分样式：*/
.contents1{
width: 100%;
background-color: #fff;
margin-top: 10px;
}
/*主体导航部分*/
.contents1_menu{
width: 1225px;
height: 80px;
background-color: #fff;
border:1px solid #000;
margin:0px auto;
}
/*主体竖导航部分*/
.contents1_menu2{
width: 1225px;
margin:0px auto;
margin-top: 10px;
}
.contents1_menu2_l{
width:240px;
height: 462px;
background-color: #393939;
float: left;
}
.contents1_menu2_r{
width: 980px;
height: 462px;
background-color: blue;
float: right;
}
/*主体分类部分*/
.contents1_column{
width: 1225px;
margin:0px auto;
margin-top: 10px;
}
.contents1_column_l{
width: 240px;
height: 170px;
float: left;
background-color:#5F5750;
}
.contents1_column_r{
width:318px;
height: 170px;
background-color: #ccc;
float: left;
margin-left: 10px;
}
/*主体小米闪购部分*/
.contents1_shop{
width: 1225px;
margin:0px auto;
margin-top: 10px;
}
.contents1_shop_1{
width: 235px;
height: 380px;
float: left;
background-color: #ccc;
}
/*图片部分*/
.contents_img{
width: 1225px;
height: 100px;
margin: 0px auto;
margin-top: 10px;
background-color: #393939;
}
/*主体下部灰色背景部分样式：*/
.contents2{width: 100%;background-color: #ccc;margin-top: 10px;}
/*商品列表部分*/
.contents_comlist{
width: 1225px;
margin: 0px auto;
margin-top: 10px;
}
.contents_comlist_t{
width: 100%;
height:70px;
line-height: 70px;
}
.contents_comlist_l{
float: left;
width:234px;
height: 614px;
}
.contents_comlist_r{
float: right;
height: 610px;
width: 978px;
}
.contents_comlist_r_1,.contents_comlist_r_0{
width: 235px;
height: 300px;
float: left;
background-color:#fff;
}
.contents_comlist_l_t .contents_comlist_l_b{
width: 236px;
height: 303px;
}
.contents_comlist_r_2{
width: 235px;
height: 145px;
background-color: blue;
}
/*底部信息样式：*/
.bottom{width: 100%;background-color: #fff;}
/*底部内容部分*/
.botton_con{
width: 1225px;
height: 200px;
margin: 0px auto;
margin-top: 10px;
}
.botton_con_t_1{
width:1225px;
line-height: 60px;
font-size: 15px;
text-align: center;
}
.botton_con_t_1 a{
font-size: 15px;
color: #616161;
margin:auto 58px;
}
.botton_con_t_1 a:hover{
color: #FF6700;
}
.botton_con_t_1 a i{
font-size: 20px;
margin-right: 10px;
}
.botton_con_t_1 a i:hover{
color: #FF6700;
}
.botton_con_t_1 span{
width: 0px;
height: 25px;
border-right: 1px solid #ccc;
}
.botton_con_line{
width: 1225px;
border-bottom: 1px solid #ccc;
display: inline-block;
}
.botton_con_t_21{
}
.botton_con_t_21 dl{
float: left;
margin-right: 100px;
margin-top: 30px;
}
.botton_con_t_21 dt{
color: #424242;
font-size: 14px;
margin-bottom: 20px;
}
.botton_con_t_21 dd{
margin-bottom: 7px;
}
.botton_con_t_21 dd a{
color: #757575;
font-size: 11px;
}
.botton_con_t_21 dd a:hover{
color: #FF6700;
}
.botton_con_t_22{
border-left: solid 1px #ccc;
height: 113px;
width: 260px;
float: right;
margin-top: 35px;
}
.botton_con_t_22_t{
font-size: 20px;
color: #FF6700;
line-height: 30px;
text-align: center;
}
.botton_con_t_22_c{
font-size: 10px;
color: #616161;
line-height: 16px;
text-align: center;
}
.botton_con_t_22_b{
text-align: center;
margin-top: 10px;
}
.botton_con_t_22_b button{
color: #FF6700;
border:1px solid #FF6700;
background: #fff;
width: 117px;
height: 28px;
font-size: 11px;
}
.botton_con_t_22_b button:hover{
background: #FF6700;
color: #fff;
font-size: 11px;
}
/*****************页脚中间**********************/
.botton_con_c{
margin-top: 20px;
}
.botton_con_c_l{
float: left;
display: block;
}
.botton_con_c_c{
float: left;
margin-left: 20px;
}
.botton_con_c_c1{
cursor: auto;
font-size: 11px;
color: #757575;
width: 620px;
}
.botton_con_c_c2{
font-size: 11px;
color: #B0B0B0;
}
.botton_con_c_c2 a{
font-size: 10px;
color: #ccc;
}
.botton_con_c_c2 a:hover{
color: #EF3A3B;
}
.botton_con_c span{
height: 5px;
width: 0px;
border-right: 1px solid #ccc;
margin:3px;
}
.botton_con_c_r{
float: left;
margin-left: 90px;
display: block;
}
.botton_con_c_r img{
height: 30px;
width: 84px;
float: left;
}
.botton_con_b{
font-size: 20px;
line-height: 20px;
height: 20px;
text-align: center;
color: #ccc;
}
批改老师：韦小宝批改时间：2018-12-12 09:12:00
老师总结：写的很不错！和上篇相比完成了底部的布局！代码完整！内容清晰！完成小米的前端案例也是一大进步了！当然课后还可以多找点案例来仿写哦！
