小米2018官网首页静态图

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*头*/

.site-topbar {
position: relative;
z-index: 30;
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
}

.container {
1226px;
height: 40px;
margin-right: auto;
margin-left: auto;
position: relative;
}

.site-topbar .topbar-info {
float: right;
margin-right: 125px;
}

#gwc {
position: relative;
z-index: 32;
display: block;
75px;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
background: coral;
position: absolute;
top: 0px;
right: 35px;
}

.topbar-nav {
float: left;
height: 40px;
line-height: 40px;
}

.site-topbar a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
text-decoration: none;
}

a:hover {
cursor: pointer;
}

.site-topbar .sep {
margin: 0 .5em;
color: #424242;
}

.site-topbar .cart-mini {
position: relative;
z-index: 32;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
color: #b0b0b0;
background: #424242;
}
/*第一狂*/

.site-header {
padding-top: 10px;
z-index: 20;
height: 100px;
}

.logo_tou {
margin-left: 20px;
}

li {
list-style: none;
float: left;
padding-left: 20px;
}

.list_1 {
text-align: center;
margin-left: 207px;
margin-top: -60px;
}

.search-hot-words {
position: absolute;
font-size: 12px;
top: 0px;
right: 42px;
z-index: 2;
text-align: right;
color: silver;
}

.search-hot-words a {
text-decoration: none;
}

.search-btn {
font-size: 13spx;
height: 27px;
}

.tou_1 {
position: absolute;
top: 55px;
right: 63px;
}

input {
height: 21px;
}
/*第二狂*/

.houme-hero {
border: 1px solid black;
background-image: url(img/banner2.jpg);
95%;
height: 460px;
margin-left: 20px;
}

.hero-kuang {
margin-top: -16px;
/*text-align: center;*/
240px;
height: 460px;
background-color: #000000;
}

.kuangzi {
color: white;
}

.kuangzi li {
color: white;
font-size: 12px;
margin: 14px;
}
/*第三矿*/

.home-sub {
margin-top: 14px;
margin-left: 14px;
}

.sub-1 {
246px;
height: 170px;
}

.sub-2 {
margin: 0;
padding: 3px;
list-style-type: none;
font-size: 12px;
text-align: center;
}

.sub-2 li {
position: relative;
float: left;
74px;
height: 84px;
padding: 0 2px;
}

.span16 {
1230px;
height: 170px;
margin-right: 22px;
}

.hongmi-promo li {
float: left;
margin-top: -84px;
margin-left: -12px;
}
/*第四狂*/

.kuang-kuang4 {
95%;
height: 335px;
margin-top: 14px;
margin-left: 20px;
background-color: white;
position: relative;
}

h3 {
text-align: left;
}

.kuang1 {
231px;
height: 335px;
border-top: 1px solid coral;
}

.tu_1 {
margin-left: 30px;
margin-top: 35px;
padding-left: aoto;
}

.kuang2 {
231px;
height: 335px;
border-top: 1px solid chartreuse;
position: absolute;
top: 43px;
left: 237px;
}

.tu_2 {
margin-left: 30px;
margin-top: 35px;
}

.tu_2 p {
margin-left: 35px;
}

.kuang3 {
231px;
height: 335px;
border-top: 1px solid blue;
position: absolute;
top: 43px;
left: 474px;
}

.tu_3 {
margin-left: 30px;
margin-top: 35px;
}

.tu_3 p {
margin-left: 14px;
}

.tu_3 span01 {
margin-left: -36px;
}

.tu_3 op {
margin-left: 25px;
}

.kuang4 {
231px;
height: 335px;
border-top: 1px solid crimson;
position: absolute;
top: 43px;
left: 711px;
}

.tu_4 {
margin-left: 30px;
margin-top: 35px;
}

.tu_4 p {
margin-left: 14px;
}

.tu_4 span01 {
margin-left: -9px;
}

.tu_4 op {
margin-left: 25px;
}

.kuang5 {
231px;
height: 335px;
border-top: 1px solid darkcyan;
position: absolute;
top: 43px;
left: 948px;
}

.tu_5 {
margin-left: 30px;
margin-top: 35px;
}

p {
margin-left: 22px;
padding-top: 10px;
font-size: 12px;
}

span01 {
margin-left: -59px;
margin-top: 10px;
color: gainsboro;
}

op {
margin-top: 10px;
color: red;
}
/*第五狂*/

.home-pei {
95%;
height: 335px;
margin-top: 14px;
margin-left: 20px;
background-color: rgba(245, 245, 245, 0.5);
position: relative;
}

.home-pei .kuang2 {
border-top: 1px solid rgba(245, 245, 245, 0.5);
top: 0;
background-color: white;
position: relative;
}

.home-pei .kuang2 .tu_2 {
margin-top: -256px;
}

.home-pei .kuang2 .xin-pin {
43px;
height: 20px;
background: chartreuse;
color: white;
padding-left: 9px;
position: absolute;
top: 0;
left: 81px;
}

.home-pei .kuang2 p {
margin-left: 5px;
}

.home-pei .kuang2 span01 {
margin-left: 21px;
}

.home-pei .kuang2 op {
margin-left: 36px;
}

.home-pei .kuang3 {
border-top: 1px solid rgba(245, 245, 245, 0.5);
background-color: white;
}

.home-pei .kuang3 p {
margin-left: -3px;
}

.home-pei .kuang3 span01 {
margin-left: 30px;
}

.home-pei .kuang3 op {
margin-left: 46px;
}

.home-pei .kuang4 {
border-top: 1px solid rgba(245, 245, 245, 0.5);
background-color: white;
position: relative;
}

.home-pei .kuang4 .xl-z {
55px;
height: 20px;
background-color: red;
color: white;
padding-left: 9px;
position: absolute;
top: -377px;
left: 73px;
}

.home-pei .kuang4 .tu_4 {
margin-top: -343px;
}

.home-pei .kuang4 span01 {
margin-left: 37px;
}

.home-pei .kuang4 p {
margin-left: -17px;
}

.home-pei .kuang5 span01 {
margin-left: 37px;
}

.home-pei .kuang4 op {
margin-left: 52px;
}

.home-pei .kuang5 {
border-top: 1px solid rgba(245, 245, 245, 0.5);
background-color: white;
}

.home-pei .kuang5 p {
margin-left: 9px;
}

.home-pei .kuang5 span01 {
margin-left: 15px;
}

.home-pei .kuang5 op {
margin-left: 31px;
}

.pj {
text-align: left;
}

.pei-1 {
background: url(img/peijian2.jpg)no-repeat;
width=231px;
height=170px;
}
/*第六狂*/

.home-wei {
95%;
height: 335px;
margin-top: 25px;
margin-left: 20px;
background-color: rgba(245, 245, 245, 0.5);
position: relative;
}

.home-wei .kuang2 {
border-top: 1px solid rgba(245, 245, 245, 0.5);
top: 0;
background-color: white;
}

.home-wei .kuang2 .tu_2 {
margin-top: 10px;
}

.home-wei .kuang2 p {
margin-left: 20px;
}

.home-wei .kuang2 op {
margin-top: 10px;
margin-left: 24px;
}

.home-wei .kuang2 span01 {
margin-left: 10px;
}

.home-wei .kuang3 {
border-top: 1px solid rgba(245, 245, 245, 0.5);
top: 0;
background-color: white;
}

.home-wei .kuang3 .tu_3 {
margin-top: 10px;
}

.home-wei .kuang3 p {
margin-left: 20px;
}

.home-wei .kuang3 op {
margin-left: 24px;
}

.home-wei .kuang3 span01 {
margin-left: 10px;
}

.home-wei .kuang4 {
border-top: 1px solid rgba(245, 245, 245, 0.5);
top: 0;
background-color: white;
}

.home-wei .kuang4 .tu_4 {
margin-top: 10px;
}

.home-wei .kuang4 p {
margin-left: -8px;
}

.home-wei .kuang4 op {
margin-left: 50px;
}

.home-wei .kuang4 span01 {
margin-left: 37px;
}

.home-wei .kuang5 {
border-top: 1px solid rgba(245, 245, 245, 0.5);
top: 0;
background-color: white;
}

.home-wei .kuang5 .tu_5 {
margin-left: 10px;
margin-top: -20px;
}
/*尾部*/

.wei-bu {
margin-top: 115px;
95%;
height: 40px;
text-align: center;
}

a {
text-decoration: none;
color: #424242;
}
</style>
</head>

<body>

<div class="site-topbar">

<div class="container">
<div class="topbar-nav">
<a rel="nofollow">小米商城</a>
<span class="sep">|</span>
<a rel="nofollow">MIUI</a>
<span class="sep">|</span>
<a rel="nofollow">米聊</a>
<span class="sep">|</span>
<a rel="nofollow">游戏</a>
<span class="sep">|</span>
<a rel="nofollow">多看阅读</a>
<span class="sep">|</span>
<a rel="nofollow">云服务</a>
<span class="sep">|</span>
<a rel="nofollow">金融</a>
<span class="sep">|</span>
<a rel="nofollow">小米商城移动版</a>
<span class="sep">|</span>
<a rel="nofollow">问题反馈</a>
<span class="sep">|</span>
<a rel="nofollow">Select Region</a>
</div>
<div class="topbar-info">
<a rel="nofollow">登录</a>
<span class="sep">|</span>
<a rel="nofollow">注册</a>
<span class="sep">|</span>
<span class="message"><a rel="nofollow">消息通知</a></span></div>
<a rel="nofollow"><span id="gwc">购物车</span></a>
</div>

</div>

<div class="site-header">
<div class="logo_tou">
<img src="img/logo_top.png" />
<img src="img/xiaoyi.png" />
<div class="nav-list">
<ul class="list_1">
<li>小米手机</li>
<li>红米</li>
<li>平板·笔记本</li>
<li>电视</li>
<li>盒子·影视</li>
<li>路由器</li>
<li>智能硬件</li>
<li>服务</li>
<li>社区</li>
</ul>
<ul class="tou_1">
<input type="submit" class="search-btn" value="搜索">
<input type="text" class="search-hot-words" placeholder="小米6 小米MLX现货">
</ul>
</div>
</div>

</div>

<div class="houme-hero">
<div class="hero-kuang">
<ul class="kuangzi">
<li>手机  电话卡</li>
<li>笔记本  平板</li>
<li>电视  盒子</li>
<li>路由器  智能硬件</li>
<li>移动电源  电池  插线板</li>
<li>耳机  音响</li>
<li>保护套  贴膜</li>
<li>线材  支架  储存卡</li>
<li>箱包  服饰  鞋  眼镜</li>
<li>米兔  生活周边</li>
</ul>

</div>
</div>

<div class="home-sub">
<div class="sub-1">
<ul class="sub-2">
<li><img src="img/hjh_01.gif" /></li>
<li><img src="img/hjh_02.gif" /></li>
<li><img src="img/hjh_03.gif" /></li><br />
<li><img src="img/hjh_04.gif" /></li>
<li><img src="img/hjh_05.gif" /></li>
<li><img src="img/hjh_06.gif" /></li>
</ul>
<div class="span16">
<ul class="hongmi-promo">
<li><img src="img/hongmi4x.png" /width="310px" height="170px"></li>
<li><img src="img/xiaomi5.jpg" /width="310px" height="170px"></li>
<li><img src="img/pinghengche.jpg" /width="310px" height="170px"></li>

</ul>
</div>
</div>

</div>

<div class="kuang-kuang4">
<h3>小米明星单品</h3>
<div class="kuang1">
<li class="tu_1"><img src="img/liebiao_xiaomimix.jpg" / width="110px" height="135px">
<p>小米MLX <br />
<span01>5月9日-21日享花呗12期分期免息</span01><br />
<op>3499元起</op>
</p>
</li>
</div>
<div class="kuang2">
<li class="tu_2"><img src="img/liebiao_xiaomi5s.jpg" / width="110px" height="135px">
<p>小米5s <br />
<span01>5月9日-10日，下单立减200元</span01><br />
<op>1999元</op>
</p>
</li>
</div>
<div class="kuang3">
<li class="tu_3"><img src="img/pinpai3.png" / width="110px" height="135px">
<p>小米手机5 64GB" <br />
<span01>5月9日-10日，下单立减100元</span01><br />
<op>1799元</op>
</p>
</li>
</div>
<div class="kuang4">
<li class="tu_4"><img src="img/pinpai4.png" / width="110px" height="135px">
<p>小米电视3s 55英寸 <br />
<span01>5月9日，下单立减200元</span01><br />
<op>3999元起</op>
</p>
</li>
</div>
<div class="kuang5">
<li class="tu_5"><img src="img/pinpai5.png" / width="110px" height="135px">
<p>小米笔记本<br />
<span01>更轻更薄，像杂志一样随身携带</span01><br />
<op>3599元起</op>
</p>
</li>
</div>
</div>

<div class="home-pei">
<h3>配件</h3>
<div class="pei-1d">
<li class="tu_1d"><img src="img/peijian1.jpg" /width="205px" height="290px"></li>
</div>
<div class="kuang2">
<li class="tu_2"><img src="img/peijian2.jpg" / width="110px" height="135px">
<p>小米6 硅胶保护套<br />
<op>49元</op> <br />
<span01>372人评价</span01>
</p>
</li>
<li class="xin-pin">新品</li>
</div>
<div class="kuang3">
<li class="tu_3"><img src="img/peijian3.jpg" / width="110px" height="135px">
<p>小米手机4c小米4c智能<br />
<op>29元</op><br />
<span01>372人评价</span01>
</p>
</li>
</div>
<div class="kuang4">
<li class="tu_4"><img src="img/peijian4.jpg" / width="110px" height="135px">
<p>红米NOTE 4X 红米note4X <br />
<op>19元</op><br />
<span01>372人评价</span01>
</p>
</li>
<li class="xl-z">享六折</li>
</div>
<div class="kuang5">
<li class="tu_5"><img src="img/peijian5.jpg" / width="110px" height="135px">
<p>小米支架式自拍杆<br />
<op>89元</op><br />
<span01>372人评价</span01>
</p>
</li>
</div>
</div>

<div class="home-wei">
<div class="pei-1d">
<li class="tu_1d"><img src="img/peijian6.png" /width="205px" height="290px"></li>
</div>
<div class="kuang2">
<li class="tu_2"><img src="img/peijian7.jpg" / width="110px" height="135px">
<p>小米指环支架<br />
<op>19元</op> <br />
<span01>372人评价</span01>
</p>
</li>

</div>
<div class="kuang3">
<li class="tu_3"><img src="img/peijian8.jpg" / width="110px" height="135px">
<p>米家随身风扇<br />
<op>19.9元</op><br />
<span01>372人评价</span01>
</p>
</li>
</div>
<div class="kuang4">
<li class="tu_4"><img src="img/peijian9.jpg" / width="110px" height="135px">
<p>红米4X 高修软胶保护套 <br />
<op>19元</op><br />
<span01>375人评价</span01>
</p>
</li>

</div>
<div class="kuang5">
<li class="tu_5"><img src="img/hongmin4.png" / width="231px" height="135px"></li>
<li class="tu_5"><img src="img/liulangengduo.png" / width="231px" height="135px"></li>

</div>
</div>

<div class="wei-bu">
<a href="#">小米商城丨MIUI丨米聊丨多看书城丨小米路由器丨视频电话丨小米天猫
店丨小米淘宝直营店丨小米网盟丨小米移动丨隐私政策丨Select Region</a>
<p>©mi.com 京ICP证110507号京ICP备10046444号京公网安备11010 802020134号京网文[2014]005_0009号</p>
<p>违法和不良信息举报电话：<a href="#">185-0130-1238</a>,本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>

</div>

</body>

</html>

小米2018官网首页 静态图

小米2018官网首页静态图