js：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="" content=""/>
<title>小米商城</title>
<link rel="stylesheet" type="text/css" href="css/xiaomi.css"/>
</head>
<body>
<div>
<!--1 导航1-->
<div class="header">
<div class="top center">
<!--1.1左-->
<div class="left fl">
<ul>
<li><a href="#">小米商城</a></li>
<li>|</li>
<li><a href="#">MIUI</a></li>
<li>|</li>
<li><a href="#">米聊</a></li>
<li>|</li>
<li><a href="#">游戏</a></li>
<li>|</li>
<li><a href="#">多看阅读</a></li>
<li>|</li>
<li><a href="#">云服务</a></li>
<li>|</li>
<li><a href="#">金融</a></li>
<li>|</li>
<li><a href="#">移动端APP</a></li>
<li>|</li>
<li><a href="#">问题反馈</a></li>
<li>|</li>
<li><a href="#">areyouok</a></li>
<div class="clear"></div>
</ul>
</div>
<!--1.2右-->
<div class="right fr">
<div class="gouwuche fr"><a href="#">购物车</a></div>
<div class="fr">
<ul>
<li><a href="#">登陆</a></li>
<li>|</li>
<li><a href="#">注册</a></li>
<li>|</li>
<li><a href="#">消息通知</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--2 导航2-->
<div class="header2">
<div class="header2 center">
<!--2.1 logo-->
<div class="images">
<img src="img/logo_foot.png"/>
<img src="img/yyymix.gif" />
</div>
<!--2.2 ul文本-->
<div class="text">
<ul>
<li><a href="#">小米手机</a></li>
<li><a href="#">红米</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">盒子影音</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<!-- 2.3 搜索框-->
<div class="search">
<input type="text" placeholder="小米6小米MIX现货" style="height: 60px; 240px;"/>
<input type="button" value="搜索" style=" 50px;height: 66px;"/>
</div>
</div>
</div>
<!-- 3 轮播图-->
<div class="main center">
<!--左列表-->
<div class="main_left fl">
<ul>
<li><a href="#">手机 电话卡</a></li>
<li><a href="#">笔记本 平板</a></li>
<li><a href="#">电视 盒子</a></li>
<li><a href="#">路由器 智能硬件</a></li>
<li><a href="#">移动电源 电池 插线板</a></li>
<li><a href="#">耳机 音箱</a></li>
<li><a href="#">保护套 贴膜</a></li>
<li><a href="#">线材 支架 储存卡</a></li>
<li><a href="#">箱包 服饰 鞋</a></li>
<li><a href="#">米兔 生活周边</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--4 广告页面-->
<div class="ad center">
<div class="ad_left fl">
<div class="ad_small fl"><img src="img/hjh_01.gif"><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_02.gif"/><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_03.gif"/><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_04.gif"/><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_05.gif"/><a href="#"></a></div>
<div class="ad_small fl"><img src="img/hjh_06.gif"/><a href="#"></a></div>
<div class="clear"></div>
</div>
<div class="ad_big fl">
<a href="#"><img src="img/hongmi4x.png" ></a>
</div>
<div class="ad_big fl">
<a href="#"><img src="img/pinghengche.jpg" ></a>
</div>
<div class="ad_big fl">
<a href="#"><img src="img/xiaomi5.jpg" ></a>
</div>
<div class="clear"></div>
</div>
<!--5 小米明星单品-->
<div class="star center">
<!-- 总体标题 -->
<div class="title">
小米明星单品
</div>
<!-- 展览图片 -->
<div class="pds">
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai1.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米MIX</p></a>
<p>5月9日-12人享花呗12期分期免息</p>
<p>3499元起</p>
</div>
</div>
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai2.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米5s</p></a>
<p>5月9日-10日，下单立减200元</p>
<p>1999元</p>
</div>
</div>
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai3.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米手机5 64GB</p></a>
<p>5月9日-10日，下单立减100元</p>
<p>1799元</p>
</div>
</div>
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai4.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米电视3s 55英寸</p></a>
<p>5月9日，下单立减200元</p>
<p>3999元</p>
</div>
</div>
<div class="one_pds fl">
<div class="pic">
<a href="#"><img src="img/pinpai5.png" alt=""></a>
</div>
<div class="sosi">
<a href="#"><p>小米笔记本</p></a>
<p>更轻更薄，像杂志一样随身携带</p>
<p>3599元起</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!--6 配件-->
<div class="parts center">
<!--总体标题-->
<div class="title">
配件
</div>
<!--物品-->
<div class="pd">
<!--无字图片-->
<div class="pd_left fl">
<div><a href="#"><img src="img/peijian1.jpg"/></a></div>
<div><a href="#"><img src="img/peijian6.png"/></a></div>
</div>
<!--描述图片-->
<div class="pd_right fr">
<div class="pd_top">
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian2.jpg"/>
</div>
<div class="sosi">
<a href="#">小米6 硅胶保护套</a>
<p>49元</p>
<p>372人评价</p>
</div>
</div>
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian3.jpg"/>
</div>
<div class="sosi">
<a href="#">小米手机4c 小米4c 智能</a>
<p>69元</p>
<p>42人评价</p>
</div>
</div>
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian4.jpg"/>
</div>
<div class="sosi">
<a href="#">红米NOTE 4X 红米note4X</a>
<p>29元</p>
<p>32人评价</p>
</div>
</div>
<div class="one_pd fr">
<div class="pic">
<img src="img/peijian5.jpg"/>
</div>
<div class="sosi">
<a href="#">小米支架式自拍杆</a>
<p>99元</p>
<p>972人评价</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="pd_bot">
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian7.jpg"/>
</div>
<div class="sosi">
<a href="#">小米指环支架</a>
<p>77元</p>
<p>88人评价</p>
</div>
</div>
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian8.jpg"/>
</div>
<div class="sosi">
<a href="#">小米随身风扇</a>
<p>33元</p>
<p>66人评价</p>
</div>
</div>
<div class="one_pd fl">
<div class="pic">
<img src="img/peijian9.jpg"/>
</div>
<div class="sosi">
<a href="#">一只黑杆</a>
<p>59元</p>
<p>39人评价</p>
</div>
</div>
<div>
<div>
<a href="#"><img src="img/hongmin4.png" ></a></a>
</div>
<div>
<a href="#"><img src="img/liulangengduo.png" ></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!--7 底部链接-->
<div class="footer center">
<p>
<a href="#">小米商城</a>
<span>|</span>
<a href="#">MIUI</a>
<span>|</span>
<a href="#">米聊</a>
<span>|</span>
<a href="#">多看书城</a>
<span>|</span>
<a href="#">小米路由器</a>
<span>|</span>
<a href="#">视频电话</a>
<span>|</span>
<a href="#">小米天猫店</a>
<span>|</span>
<a href="#">小米淘宝直营店</a>
<span>|</span>
<a href="#">小米网盟</a>
<span>|</span>
<a href="#">小米移动</a>
<span>|</span>
<a href="#">隐私政策</a>
<span>|</span>
<a href="#">Select Region</a>
</p>
<p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
<p>违法和不良举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
</div>
</body>
</html>
css：
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-size: 12px;
font-family: 微软雅黑;
color: #000000;
border-style: none;
border-collapse: collapse;
}
.center{
margin: 0 auto;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
.ml{
margin-left: 8px;
}
a{
color: white;
}
button{
cursor: pointer;
}
/*---------------------------------------------------------*/
/*导航1*/
.header{
100%;
background: #333;
height: 40px;
}
.header .top{
1226px;
height: 40px;
line-height: 40px;
}
.header .top .left ul li{
float: left;
color: #ccc;
font-size:12px;
}
.header .top .left ul li a{
display: block;
color: #b0b0b0;
padding: 0 8px;
}
.header .top .left ul li a:hover{
color: #fff;
}
.header .top .right ul li{
float: left;
font-size:12px;
color: #CCCCCC;
}
.header .top .right ul li a{
display: block;
color: #b0b0b0;
padding: 0 8px;
}
.header .top .right ul li a:hover{
color: #fff;
}
.gouwuche a{
color:#fff;
font-size: 15px;
}
.gouwuche{
margin:0 20px;
background: #424242;
120px;
text-align: center;
cursor: pointer;
background: #FF6700;
color: #fff;
}
.gouwuche:hover{
background: #666;
color: #000;
}
/*---------------------------------------------------------*/
/*导航2*/
.header2{
100%;
height: 100px;
}
.header2 .center{
1226px;
height: 100px;
line-height: 100px;
margin: 10px auto;
}
height: 100px;
padding: 20px;
float: left;
}
.header2 .center .text ul li{
float: left;
color: #ccc;
font-size:15px;
}
.header2 .center .text ul li a{
display: block;
color: #000;
padding: 0 8px;
}
.header2 .center .text ul li a:hover{
color: pink;
}
.header2 .center .search{
padding: 0;
float: right;
}
/*---------------------------------------------------------*/
/*轮播图*/
.main{
margin-top: 25px;
1226px;
height: 460px;
background: url(../img/banner.jpg) no-repeat;
position: relative;
}
.main_left{
background: #0C0C13;
235px;
height: 460px;
position: absolute;
float: left;
}
.main .main_left ul li{
235px;
height: 46px;
}
.main .main_left ul li a{
display: inline-block;
line-height: 46px;
margin-left: 16px;
}
.main .main_left ul li:hover{
background: #FF6700;
}
/*---------------------------------------------------------*/
/*广告页*/
.ad{
1226px;
height: 170px;
margin-top: 15px;
}
.ad_left{
235px;
height: 170px;
}
.ad_small{
78px;
height: 85px;
}
.ad_big{
330px;
height: 170px;
text-align: center;
}
.ad .ad_big img{
325px;
height: 170px;
float: left;
}
/*---------------------------------------------------------*/
/*明星单品*/
.star{
1226px;
height: 300px;
margin-top: 15px;
}
.title{
height: 30px;
font-size: 20px;
font-weight: 900;
}
/* 商品 */
.products{
1226px;
height: 220px;
text-align: center;
margin-top: 10px;
}
.one_pds{
245px;
height: 220px;
}
.pic{
245px;
}
.star .pds .one_pds .pic img{
border-top: 1px solid pink;
120px;
height: 120px;
}
.star .pds .one_pds .sosi p{
margin-top: 10px;
}
.star .pds .one_pds .sosi p:nth-child(1){
font-size: 12px;
}
.star .pds .one_pds .sosi p:nth-child(2){
color: #B0B0B0;
font-size: 10px;
}
.star .pds .one_pds .sosi p:nth-child(3){
color: red;
}
.star .pds .one_pds .sosi a p:hover{
color: red;
}
/*---------------------------------------------------------*/
/*配件*/
.parts{
1226px;
height: 630px;
margin-top: 15px;
}
.pd{
1226px;
height: 600px;
text-align: center;
margin-top: 10px;
}
.pd_left{
230px;
height: 600px;
}
.parts .pd .pd_left img{
230px;
height: 300px;
}
.pd_right{
996px;
height: 600px;
}
.pd_top{
996px;
height: 300px;
}
.pd_bot{
996px;
height: 300px;
}
.one_pd{
249px;
height: 300px;
}
.parts .pd .pd_right .one_pd .sosi p{
margin-top: 15px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(1){
font-size: 12px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(2){
color: red;
font-size: 10px;
}
.parts .pd .pd_right .one_pd .sosi p:nth-child(3){
color: #B0B0B0;
}
.parts .pd .pd_right .one_pd .sosi a p:hover{
color: red;
}
/*---------------------------------------------------------*/
/*底部链接*/
.footer{
1226px;
height: 250px;
margin-top: 150px;
}
.footer p{
font-family: 微软雅黑;
text-align: center;
margin: 10px auto;
}
.footer p a{
color: #000000;
}
.footer p a:hover{
color: #FF0000;
}