小米官网案例商城底部布局(1)作业

原创 2018-11-10 22:15:50 5
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米官网案例练习</title> <link rel="shortcut icon" type="im
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米官网案例练习</title>
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<!--头部开始-->
<div>
<div>
<div></div>
<div></div>
</div>

</div>
<!--内容开始-->
<div>
<!--内容头部导航-->
<div></div>
<!--内容轮播图部分-->
<div>
<div></div>
<div></div>
</div>
<!--内容轮播图下方广告部分-->
<div>
<div style='margin-right:13px'></div>
<div style='background:url(images/midAD1.jpg);margin-right:13px'></div>
<div style='background:url(images/midAD2.jpg);margin-right:13px'></div>
<div style='background:url(images/midAD3.jpg)'></div>
</div>
<!--小米闪购部分-->
<!-- <h2 style='width:1226px;height:29px;'>小米闪购</h2> -->
<div>
<h2>小米闪购</h2>
<div style='border-top:1px solid #FF0000'></div>
<div style='border-top:1px solid #FF6700;margin-left:2px'></div>
<div style='border-top:1px solid #FF8800'></div>
<div style='border-top:1px solid #0000FF'></div>
<div style='border-top:1px solid #FF0000;margin-right:0;'></div>
<div></div>
</div>
<div style='background:url(images/longAD1.jpg)'></div>
<!--内容手机栏目部分-->
<div><h2>手机</h2></div>
<div>
<div></div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div style='background:url(images/longAD2.jpg)'></div>
<!--内容智能栏目部分-->
<div><h2>家电</h2></div>
<div>
<ul>
<li style='background:url(./images/buy/家电AD1.jpg)'></li>
<li style='background:url(./images/buy/家电AD2.jpg)'></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div></div>
<div></div>
</li>
</ul>
</div>
<div style='background:url(images/longAD3.jpg)'></div>
<!--内容家电部分-->
<div><h2>智能</h2></div>
<div>
<ul>
<li style='background:url(images/buy/智能AD1.jpg)'></li>
<li style='background:url(images/buy/智能AD2.jpg)'></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div></div>
<div></div>
</li>
</ul>
</div>
<div style='background:url(images/longAD4.jpg)'></div>
</div>
<!--结尾开始-->
<div>
<div>
<ul>
<li><a href=""><i class='fa fa-wrench'></i>预约维修服务</a></li>
<li><a href=""><i class='fa fa-rotate-right'></i>7天无理由退货</a></li>
<li><a href=""><i class="fa fa-refresh"></i>15天免费换货</a></li>
<li><a href=""><i class="fa fa-gift"></i>满150包邮</a></li>
<li style='border-right:none'><a href=""><i class="fa fa-map-marker"></i>520余家售后网点</a></li>
</ul>
</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>
<p>400-100-5678</p>
<p>周一至周日 8:00-18:00
<br>
(仅收市话费)
</p>
<button><i class='fa fa-commenting' style='margin-right:5px'></i>联系客服</button>
</div>
</div>
<div>
<div>
<div></div>
<p>小米商城|MIUI|米家|米聊|多看|游戏|路由器|米粉卡|政企服务|小米天猫店|隐私政策|问题反馈|廉正举报|Select Region</p>
<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号 
(京)网械平台备字(2018)第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械公告 
违法和不良信息举报电话:185-0130-1238,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
</div>
</div>
</div>



</body>
</html>

CSS部分

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ul li{list-style:none;}
body{font-size:13px;font-family:微软雅黑;}
.clear{clear:both;}
a{text-decoration:none;}

/*头部样式*/
.header{height:40px;width:100%;background-color:#333;}
.nav{width:1226px;height:40px;margin:0 auto;}
.header_left{width:500px;height:40px;line-height:40px;background:blue;float:left;}
.header_right{width:260px;height:40px;line-height:40px;background:blue;float:right;}


/*内容样式*/

.content{width:1226px;/*background-color:#ccc*/;margin:0 auto;}
/*头部导航部分*/
.contentMenu{width:1226px;height:66px;margin:10px auto;background:red;}
/*轮播图部分*/
.contentPic{width:1226px;height:460px;background-color:blue;}
.contentPic_left{width:246px;height:460px;float:left;background:black;}
.contentPic_right{width:980px;height:460px;float:right;background:red;}
/*轮播图下方广告样式*/
.contentPic_ul{width:1226px;height:180px;margin:10px 0;}
.contentPic_ul_0{width:235px;height:170px;background:#5F5750;float:left;}
.contentPic_ul_1{width:317px;height:170px;float:left;}
/*小米闪购栏目样式*/
.contentShop{width:1226px;}
.contentShop_mi{height:58px;line-height:58px;font-size:25px;font-weight:lighter;}
.contentShop_ul{width:235px;height:380px;float:left;background:black;margin-right:12px;}
/*产品栏目样式*/
.contentImg{width:1226px;height:100px;margin:10px auto;}
.contentUL{width:1226px;height:60px;margin:10px 0;/*background:red;*/}
.contentUL>h2{line-height:60px;font-size:25px;font-weight:lighter;}
.contentPhone{width:1226px;height:614px;/*background:red;*/margin:10px 0;}
.contentPhone_0_left{width:234px;height:614px;background-color: black;float:left;background:url(../images/buy/phoneAD.jpg);}
/*.contentPhone_right{width:992px;height:614px;background-color:blue;float:right;}*/
.contentPhone_0_right ul{width:992px;height:614px;float:right;}
.contentPhone_0_right ul li{width:234px;height:300px;margin-bottom:14px;margin-left:14px;background-color: red;float:left;}
/*产品栏目基本样式*/
.contentPhone_left{width:234px;height:614px;float:left;}
.contentPhone_left li{height:300px;width:234px;float:left;background-color: red;}
.contentPhone_left_t{margin-bottom:14px;}
.contentPhone_right{width:992px;height:614px;float:right;}
.contentPhone_right li{width:234px;height:300px;background-color: red;float:left;margin-left:14px;}
.contentPhone_right_b{margin-top:14px;}
.contentPhone_right_b_0{width:234px;height:145px;background-color: blue;}
.contentPhone_right_b_1{width:234px;height:145px;margin-top:14px;background-color: yellow;}
/*底部样式*/
.footer{width:1226px;margin:0 auto;}
/*底部服务样式*/
.footer-service{width:1226px;height:80px;border-bottom:1px solid #e0e0e0;}
.lister-service li{width:242.73px;height:25px;float:left;text-align:center;border-right:1px solid #e0e0e0;margin-top:27.5px;}
.lister-service li a{width:100px;font-size:17px;color:#616161;line-height:25px;font-weight:300;}
.lister-service li a:hover{color:#ff6700;}
.lister-service li i{font-size:23px;margin-right:10px;}
/*底部链接样式*/
.footer-links{width:1226px;height:192px;margin-top:40px;}
.footer-links dl{width:160px;height:112px;float:left;}
.footer-links dt{width:160;height:17px;margin-bottom:26px;font-size:14px;color:#424242;/*line-height:1.25;*/}
.footer-links dd{width:160px;height:18px;margin-top:10px;}
.footer-links dd a{color:#757575;font-size:12px;}
.footer-links dd a:hover{color:#ff6700;}
.col-contact{width:251px;height:112px;float:right;text-align:center;border-left:1px solid #e0e0e0;}
.telephone{width:251px;height:22px;color:#ff6700;font-size:22px;margin-bottom:5px;}
.time{width:251px;height:36px;margin-bottom:16px;font-size:12px;}
.col-contact button{width:118px;height:28px;font-size:12px;text-align:center;color:#ff6700;background:#fff;line-height:28px;border:1px solid #ff6700;}
.col-contact button:hover{color:#fff;background:#ff6700;}
/*底部信息样式*/
.site-info{width:1226px;height:182px;margin:30px 0;}
.container{width:1226px;height:73px;/*margin:0 61px;*/}
.logo_ir{width:57px;height:57px;float:left;background:url(../images/footlogo.png);}

作业.png

批改老师:灭绝师太批改时间:2018-11-11 09:22:21
老师总结:基本布局没有问题,字体,颜色等细节上可以在精细一点

发布手记

热门词条