摘要：<!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{
float: left;
height: 120px;
/*background-color: red;*/
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;
}
</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></div>
</div>
</div>
</body>
</html>
