摘要：<!DOCTYPE html> <html> <head> <title>小米商城</title> <meta charset="utf-8"> <!-- <
<!DOCTYPE html>
<html>
<head>
<title>小米商城</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{margin: 0px; padding: 0px;}
li{list-style: none;}
a{text-decoration: none;cursor: pointer;}/*cursor是指定光标移上效果*/
.clear{clear: both;}
/*头部样式*/
.header{width: 100%;height: 40px;background-color: #333333;margin: 10px 0px;}
.memu{width: 1226px;height: 40px;background-color: #ccc;margin: 0px auto;}
/*主题部分样式*/
.contents{width: 100%;margin: 10px auto;}
.content{width: 1226px;margin: 0px auto;}
.content-memu{width: 1226px;height: 68px;background-color:#ccc;margin: 10px auto;}
.content-pic{width: 1226px;height: 460px;margin: 10px auto;}
.content-pic-l{width: 246px; height: 460px; background-color: red; float: left;}
.content-pic-r{width: 980px; height: 460px; background-color: green; float: left;}
.content-ul{width: 1226px;height: 170px;background-color: #ccc;margin: 10px auto;}
.content-ul-0{width: 236px; height: 170px; background-color: #5F5750; float: left;}
.content-ul-1{width: 316px;height: 170px;background-color: red;float: left;margin-left: 14px;}
.content-shop{width: 1226px;height: 400px;margin: 10px auto;}
.content-shop-0{width: 236px;height: 340px;background-color:#ccc;float: left;}
.content-shop-1{width: 236px;height: 340px;background-color:#ccc;float: left;margin-left: 11.5px;}
.content-img{width: 1226px;height: 120px;background-color: #ccc;margin: 10px auto;}
.content-phone{width: 1226px;height: 85px;background-color: #ccc;margin: 10px auto;}
.content-phone-content{width: 1226px;height: 614px;margin: 10px auto;background-color: #ccc;}
.content-phone-content-l{width: 234px;height: 614px;float: left;margin-right: 12px;}
.content-phone-content-l-0{width: 234px;height: 300px;float: left;background: blue;}
.content-phone-content-r{width: 980px;height: 614px;float: left;}
.content-phone-content-r div{width: 236px;height: 300px;float: left;background-color:red;}
#content-phone-content-r-0{width: 236px;height: 145px;float: left;background-color: blue;}
/*底部分样式*/
.footers{width: 100%;height: 345px;margin-top: 10px auto;
/*background: #ccc;*/}
.footer{width: 1226px;height: 345px;/*background-color:blue;*/margin: 0px auto;}
.footer-top{width: 1226px;height: 80px;/*background-color: red;*/text-align: center;}
.footer-top a{color: #616161; margin: 0px 55px; line-height: 80px; font-size: 16px;}
.footer-top a i{margin-right: 8px;}
.footer-top span{border-right: 1px solid #E0E0E0;}
.footer-top a:hover{color: #FF6700;}
.line{width: 1226px;display: block;border-top:1px solid #E0E0E0;}
.footer-mid{width: 1226px;height: 150px; /*background-color: red; */}
.footer-mid dl{float: left;}
.footer-mid dl dt{margin:30px 0px;margin-bottom: 15px;font-size: 14px;color: #616161;}
.footer-mid dl dd{margin-top:15px;font-size: 12px;color: #616161;}
.footer-mid dl dd:hover{color: #FF6700;}
.footer-mid-dl{margin-left: 110px;}
.footer-mid span{float: left;display: inline-block;margin-left:80px;margin-top:30px;height: 120px;border-left: 1px solid #E0E0E0;}
.footer-mid-r{height: 120px; margin-left: 50px; padding-top:30px; text-align: center;}
.footer-mid-r p{margin: 5px 0px;}
.footer-mid-r i{margin: 0px 3px;}
.footer-mid-r button{margin: 5px 0px;width: 120px;height: 30px;background-color: #fff;border: 1px solid #FF6700;color: #FF6700;}
.footer-mid-r button:hover{color:#fff;background-color: #FF6700;}
.footer-mid-r button i:hover{color:#fff;}
.footer-mid-r-phone{color: #FF6700;font-size: 22px;}
.footer-mid-r-time{font-size: 12px;color:#616161;}
.footer-bot{width: 1226px;height:60px;margin-top:30px;}
.footer-bot-l{width: 56px;height: 60px;float: left;}
.footer-bot-l img{height: 60px;}
.footer-bot-m{width: 650px;height: 60px;/*background-color:pink;*/float: left;margin-left:10px;}
.footer-bot-m-ul0 span{display: inline-block; height: 15px; margin:1px 2px; border-left: 1px solid #B0B0B0; float: left;}
.footer-bot-m ul{height: 20px;}
.footer-bot-m ul li{float: left; font-size: 12px; line-height: 20px; color: #616161;}
.footer-bot-m-ul1 li{opacity: 0.6;}
.footer-bot-m-ul2 li{opacity: 0.6;}
.footer-bot-m-ul1 li:hover{color:#FF6700;}
.footer-bot-m-ul0 li:hover{color: #FF6700;}
.footer-bot-r{width: 510px;height: 60px;float: left;line-height: 60px;}
.footer-bot-r img{width: 85px;height: 28px;margin-left:10px;}
.ad{width: 1226px;margin: 5px auto; font-size: 24px; font-family: 楷体; font-weight: 600;text-align: center;opacity: 0.2;}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="memu">
导航
</div>
</div>
<!-- 主题部分 -->
<div class="contents">
<div class="content">
<div class="content-memu">菜单</div>
<div class="content-pic">
<div class="content-pic-l"></div>
<div class="content-pic-r"></div>
</div>
<div class="content-ul">
<div class="content-ul-0"></div>
<div class="content-ul-1" style="background:url(images/midAD1.jpg);"></div>
<div class="content-ul-1" style="background:url(images/midAD2.jpg);"></div>
<div class="content-ul-1" style="background:url(images/midAD3.jpg);"></div>
</div>
<div class="content-shop">
<h1>小米闪购</h1>
<div class="content-shop-0" style="border-top:1px solid #E53935;"></div>
<div class="content-shop-1" style="border-top:1px solid #FFAC13;"></div>
<div class="content-shop-1" style="border-top:1px solid #83C44E;"></div>
<div class="content-shop-1" style="border-top:1px solid #2196F3;"></div>
<div class="content-shop-1" style="border-top:1px solid #E53935;"></div>
</div>
<div class="content-img" style="background:url(images/longAD1.jpg)"></div>
<div class="content-phone">手机</div>
<div class="content-phone-content">
<div class="content-phone-content-l" style="background: url(images/buy/手机AD.jpg);"></div>
<div class="content-phone-content-r">
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-top:14px;"></div>
</div>
</div>
<div class="content-img" style="background:url(images/longAD2.jpg)"></div>
<div class="content-phone">家电</div>
<div class="content-phone-content">
<div class="content-phone-content-l">
<div class="content-phone-content-l-0" style="background:url(images/buy/家电AD1.jpg);"></div>
<div class="content-phone-content-l-0" style="margin-top:14px;background:url(images/buy/家电AD2.jpg);"></div>
</div>
<div class="content-phone-content-r">
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-top:14px;">
<div id="content-phone-content-r-0"></div>
<div id="content-phone-content-r-0" style="margin-top:10px;"></div>
</div>
</div>
</div>
<div class="content-img" style="background:url(images/longAD3.jpg)"></div>
<div class="content-phone">智能</div>
<div class="content-phone-content">
<div class="content-phone-content-l">
<div class="content-phone-content-l-0" style="background:url(images/buy/智能AD1.jpg);"></div>
<div class="content-phone-content-l-0" style="background:url(images/buy/智能AD1.jpg);margin-top:14px"></div>
</div>
<div class="content-phone-content-r">
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div style="margin-right:12px;"></div>
<div></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-right:12px; margin-top:14px;"></div>
<div style="margin-top:14px;">
<div id="content-phone-content-r-0"></div>
<div id="content-phone-content-r-0" style="margin-top:10px;"></div>
</div>
</div>
</div>
<div class="content-img" style="background:url(images/longAD4.jpg)"></div>
</div>
</div>
<!-- 底部部分 -->
<div class="footers">
<div class="footer">
<div class="footer-top">
<a href="#"> <i class="fa fa-wrench fa-lg"></i>预约维修服务</a><span></span>
<a href="#"> <i class="fa fa-rotate-right fa-lg"></i>7天无理由退货</a><span></span>
<a href="#"> <i class="fa fa-refresh fa-lg"></i>15天免费换货</a><span></span>
<a href="#"> <i class="fa fa-gift fa-lg"></i>满150元包邮</a><span></span>
<a href="#"> <i class="fa fa-map-marker fa-lg"></i>520余家售后网点</a>
</div>
<span class="line"></span>
<div class="footer-mid">
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl class="footer-mid-dl">
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
<dl class="footer-mid-dl">
<dt>线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dd>授权体验店</dd>
</dl>
<dl class="footer-mid-dl">
<dt>关于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dd>投资者关系</dd>
</dl>
<dl class="footer-mid-dl">
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官网微博</dd>
<dd>联系我们</dd>
</dl>
<dl class="footer-mid-dl">
<dt>特色服务</dt>
<dd>F码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
<span></span>
<div class="footer-mid-r">
<p class="footer-mid-r-phone">Feir-520-1314</p>
<p class="footer-mid-r-time">周一至周日 8:00-18:00<br>
(仅收市话费)</p>
<button><i class="fa fa-commenting "></i>联系客服</button>
</div>
</div>
<div class="footer-bot">
<div class="footer-bot-l">
<img src="images/footlogo.png">
</div>
<div class="footer-bot-m">
<ul class="footer-bot-m-ul0">
<li>小米商城</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>
<ul class="footer-bot-m-ul1">
<li>©mi.com</li>
<li>京ICP证110507号</li>
<li>京ICP备10046444号 </li>
<li>京公网安备11010802020134号</li>
<li>京网文[2014]0059-0009号</li>
</ul>
<ul class="footer-bot-m-ul2">
<li>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</li>
</ul>
</div>
<div class="footer-bot-r">
<img src="images/footericon1.png">
<img src="images/footericon2.png">
<img src="images/footericon3.png">
<img src="images/footericon4.png">
<img src="images/footericon5.png">
</div>
</div>
<div class="ad">
<span>探索黑科技，小米为发烧而生！</span>
</div>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-19 09:17:51
老师总结：完成的不错，布局还可以细化，最好附上课程图片哦
