开发”小米商城官网首页”（静态页面）
开发”小米商城官网首页”（静态页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城 - 小米MIX 3、红米Note 7、小米8、小米电视官方网站</title>
<meta name="discription" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX 3、小米8、小米Note 3，红米手机系列红米Note 7、红米6 Pro，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。">
<meta name="keywords" content="小米,小米8,小米Note3,红米Note7,小米MIX3,小米商城">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<link rel="icon" href="image/favicon.ico">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
</style>
<style type="text/css">
.topBar{
width: 100%;
background-color: #333;
position: relative;
font-size: 12px;
}
.container{
width: 1226px;
margin: 0 auto;
overflow: hidden;
}
.topBar_nav{
float:left;
height: 40px;
line-height: 40px;
text-align: center;
}
.topBar_cart{
float:right;
height: 40px;
width: 120px;
line-height: 40px;
text-align: center;
background-color: #424242;
}
.topBar_cart a{
display: block;
text-decoration: none;
color: #b0b0b0;
height: 40px;
width: 120px;
}
.topBar_info{
float:right;
height: 40px;
line-height: 40px;
text-align: center;
margin-right: 15px;
}
.topBar a{
text-decoration: none;
color: #b0b0b0;
}
.topBar a:hover{
color: #fff;
}
.topBar_cart a:hover{
color: #ff6700;
background-color: #fff;
}
.topBar span{
color: #424242
}
</style>
/*header*/
<style type="text/css">
.header{
width: 1226px;
height: 100px;
margin: 0 auto;
}
.header img{
position: absolute;
top: 62px;
bottom: 22px;
width: 55px;
height: 55px;
}
.null{
float: left;
width: 245px;
height: 100px;
}
.header_nav{
float: left;
width: 597px;
height: 100px;
}
.header_nav ul li{
float: left;
text-align: center;
line-height: 100px;
margin:0 8px;
}
.header_nav ul li a {
color: #333;
text-decoration: none;
}
.header_nav ul li a:hover{
color: #ff6700;
}
.header_search{
float:right;
margin-top:25px;
height: 50px;
width: 302px;
}
.header .text{
float: right;
width: 250px;
height: 48px;
border: 1px solid #b0b0b0;
padding: 0px;
}
#search{
float: right;
width: 50px;
height: 50px;
border: 1px solid #b0b0b0;
border-left: 0;
cursor: pointer;
background-color: white;
background-image: url("image/search_b.png");
}
#search:hover{
background-image: url("image/search_o.jpg")
}
.search_text{
float:right;
margin-top:-37px;
margin-right:55px;
width: 125px;
}
.search_text a{
float: right;
margin: 5px;
text-decoration: none;
background-color: #eee;
font-size: 12px;
color:#757575;
}
.search_text a:hover{
color: #fff;
background-color: #ff6700;
}
</style>
home
<style type="text/css">
.home{
position: relative;
width: 1226px;
height: 460px;
margin: 0 auto;
}
.home img{
width: 1226px;
height: 460px;
}
.home_container{
position: absolute;
top:0;
width: 234px;
height: 420px;
padding: 20px 0 20px;
background-color: rgba(0,0,0,0.6);
}
.content_slide{
float:right;
}
.home_list a{
display: block;
text-decoration: none;
font-size: 14px;
width: 204px;
height: 42px;
color: #fff;
line-height: 42px;
padding-left: 30px;
}
.home_list ul li a:hover{
background-color: #ff6700;
}
.left_logn{
position: relative;
top: -269px;
left:-942px;
width:50px;
height:70px;
}
.left_logn img{
width: 18px;
height:30px;
position: absolute;
top: 20px;
right: 16px;
cursor: pointer;
}
.right_logn {
position: relative;
top: -339px;
/*left: 0px;*/
width: 50px;
height: 70px;
}
.right_logn img{
width: 18px;
height:30px;
position: absolute;
top: 20px;
right: 16px;
cursor: pointer;
}
.content_slide div:hover{
background-color: rgba(0,0,0,0.4);
}
.content_slide span{
position: absolute;
top:420px;
left:1146px;
}
</style>
home_sub
<style type="text/css">
.home_sub{
position: relative;
width: 1226px;
height: 170px;
margin: 14px auto 0;
}
.sub_list{
float:left;
width: 234px;
height: 170px;
background-color: #5f5750;
}
.promo{
position: absolute;
left:234px;
width: 992px;
height: 170px;
}
.promo img{
float:right;
width: 316px;
height: 170px;
margin-left: 14px;
}
.sub_list img{
position: relative;
top:5px;
left:22px;
width: 22px;
height: 22px;
color: rgba(255,255,255,0.7);
}
.sub_list div{
width: 234px;
height: 85px;
}
.sub_list ul li{
float: left;
width: 68px;
height: 75px;
margin: 1px 5px ;
padding-top: 8px;
}
.sub_list ul li a{
position: relative;
top:5px;
left:12px;
width: 38px;
height: 40px;
text-decoration: none;
font-size: 12px;
color: rgba(255,255,255,0.7);
}
.sub_list ul li a:hover{
color: white;
}
</style>
migo
<style type="text/css">
.migo{
position: relative;
width: 1226px;
height: 438px;
margin: 15px auto 0;
}
.title{
font-size: 22px;
color: #333;
font-weight: 200;
line-height: 58px;
}
.change{
position: absolute;
top: 34px;
left:1154px;
width: 72px;
height: 24px;
}
.change input{
float: right;
width: 36px;
height: 24px;
font-size: 16px;
background-color: #fff;
border: 1px solid #e0e0e0;
}
.image_go{
width: 1226px;
height: 340px;
padding-bottom: 40px;
margin: 0 auto;
}
.image_go img{
width: 234px;
height: 339px;
}
.image1{
margin-left: 9px;
}
</style>
helo
<style type="text/css">
.helo{
width: 1226px;
height: 120px;
padding-bottom: 40px;
margin: 0 auto;
}
.helo img{
width: 1226px;
height: 120px;
}
</style>
footer
<style type="text/css">
.footer{
width: 1903px;
height: 272px;
}
.footer_service{
width: 1226px;
height: 55px;
border-bottom: 1px solid #e0e0e0;
margin: 0 auto;
padding-top: 25px;
}
.footer_service ul li{
float: left;
width: 242px;
height: 30px;
text-align: center;
border-right: 1px solid #e0e0e0;
}
.footer_service ul li a {
text-decoration: none;
font-size: 16px;
color: #616161;
position: relative;
top: -8px;
}
.footer_service ul li a:hover {
color: #ff6700;
}
.footer_link{
width: 1226px;
height: 112px;
padding: 40px 0;
margin: 0 auto;
}
.footer_help{
float: left;
width: 974px;
height: 112px;
}
.footer_tel{
float: left;
width: 251px;
height: 112px;
border-left: 1px solid #e0e0e0;
}
.footer_help dl{
float: left;
width: 160px;
height: 112px;
}
.footer_help dl dt{
width: 160px;
height: 17px;
margin: -1px 0 26px 0;
font-size: 14px;
color: #424242;
}
.footer_help dl dd{
width: 160px;
height: 18px;
margin: 10px 0 0;
font-size: 12px;
}
.footer_help a{
text-decoration: none;
color: #757575;
}
.footer_tel .tel{
width: 251px;
height: 22px;
margin: 0 0 5px;
font-size: 22px;
color: #ff6700;
text-align: center;
}
.footer_tel .time{
width: 251px;
height: 36px;
margin: 0 0 16px;
font-size: 12px;
color: #616161;
text-align: center;
}
.footer_tel a{
margin: 0 auto;
text-align: center;
text-decoration: none;
display: block;
width: 118px;
height: 28px;
font-size: 12px;
color: #ff6700;
line-height: 28px;
background-color: #fff;
border: 1px solid #ff6700;
}
.footer_tel a:hover{
color: #fff;
background-color: #f25807;
border: 1px solid #f25807;
}
</style>
site_info
<style type="text/css">
.site_info{
width: 1903px;
height: 172px;
padding: 30px 0;
background-color: #f5f5f5;
}
.bottom_info{
width: 1226px;
height: 119px;
margin: 0 auto;
}
.bottom_img{
float:left;
width: 67px;
height: 119px;
}
.bottom_img img{
width: 57px;
height: 57px;
}
.bottom_text{
float: left;
width: 1159px;
height: 119px;
}
.bottom_nav{
width: 1159px;
height: 19px;
}
.bottom_nav a{
text-decoration: none;
line-height: 18px;
font-size: 12px;
color: #757575;
}
.bottom_nav a:hover{
color: #ff6700;
}
.bottom_nav span{
color: #b0b0b0
}
.bottom_info_text{
width: 1159px;
height: 72px;
font-size: 12px;
color: #b0b0b0;
}
.bottom_info_text a{
text-decoration: none;
color: #b0b0b0;
}
.bottom_info_text a:hover{
color: #ff6700;
}
.bottom_link img{
width: 85px;
height: 28px;
cursor: pointer;
}
.end{
width: 276px;
height: 19px;
margin: 30px 818px 0;
font-size: 18px;
color: #cacaca;
}
</style>
bar
<style type="text/css">
.bar{
width: 84px;
height: 471px;
position: fixed;
top:77px;
right:0;
}
.bar a:hover {
color: #ff6700;
}
.bar_link{
width: 84px;
height: 360px;
}
.bar_link a{
display: block;
width: 82px;
height: 68px;
font-size: 14px;
color: #757575;
border: 1px solid #f5f5f5;
text-decoration: none;
text-align: center;
padding-top: 20px;
}
.bar_return{
width: 82px;
height: 90px;
}
.bar_return a{
display: block;
width: 82px;
height: 68px;
font-size: 14px;
color: #757575;
border: 1px solid #f5f5f5;
text-decoration: none;
text-align: center;
padding-top: 20px;
margin-top: 14px;
}
</style>
<!--<link rel="stylesheet" href="css/topbar.css">-->
<!--<link rel="stylesheet" href="css/header.css">-->
<!--<link rel="stylesheet" href="css/home.css">-->
<!--<link rel="stylesheet" href="css/home_sub.css">-->
<!--<link rel="stylesheet" href="css/migo.css">-->
<!--<link rel="stylesheet" href="css/helo.css">-->
<!--<link rel="stylesheet" href="css/footer.css">-->
<!--<link rel="stylesheet" href="css/site_info.css">-->
<!--<link rel="stylesheet" href="css/bar.css">-->
</head>
<body>
<div class="topBar">
<div class="container">
<div class="topBar_nav">
<a href="#">小米商城</a>
<span>|</span>
<a href="#">MIUI</a>
<span>|</span>
<a href="#">loT</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="#">下载app</a>
<span>|</span>
<a href="#">Select Region</a>
</div>
<div class="topBar_cart">
<a href="#">
<img src="image/cart.png" style="height: 20px;width: 20px;">
购物车
</a>
</div>
<div class="topBar_info">
<a href="#">登陆</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
</div>
</div>
</div>
<div class="header">
<img src="image/logo.jpg" alt="logo">
<div class="null"></div>
<div class="header_nav">
<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="header_search">
<form action="header_search" medthod="get">
<label for="search"></label>
<input type="submit" value="" id="search">
<input type="text" name="search" class="text">
</form>
<div class="search_text">
<a href="#">小米MIX 2S</a>
<a href="#">小米8</a>
</div>
</div>
</div>
<div class="home">
<img src="image/mi8.jpg">
<div class="home_container">
<div class="home_list">
<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>
<div class="content_slide">
<div class="left_logn">
<!--<a href="#">-->
<img src="image/left_logn.png">
<!--</a>-->
</div>
<div class="right_logn">
<!--<a href="#">-->
<img src="image/right_logn.png">
<!--</a>-->
</div>
<span>• • • •</span>
</div>
</div>
<div class="home_sub">
<div class="sub_list">
<div class="first_line">
<ul>
<li>
<img src="image/phone.png">
<br>
<a href="#">选购手机</a>
</li>
<li>
<img src="image/present.png">
<br>
<a href="#">企业团购</a>
</li>
<li>
<img src="image/F.png">
<br>
<a href="#">F码通道</a>
</li>
</ul>
</div>
<div class="second_line">
<ul>
<li>
<img src="image/sim.png">
<br>
<a href="#"> 米粉卡</a>
</li>
<li>
<img src="image/circle.png">
<br>
<a href="#">以旧换新</a>
</li>
<li>
<img src="image/card.png">
<br>
<a href="#">话费充值</a>
</li>
</ul>
</div>
</div>
<div class="promo">
<img src="image/3.jpg" >
<img src="image/2.jpg" >
<img src="image/1.jpg" >
</div>
</div>
<div class="migo">
<div class="title">小米闪购</div>
<div class="change">
<input type="submit" value=">">
<input type="submit" value="<">
</div>
<div class="image_go">
<img src="image/go1.jpg">
<img src="image/go2.jpg" class="image1">
<img src="image/go3.jpg" class="image1">
<img src="image/go4.jpg" class="image1">
<img src="image/go5.jpg" class="image1">
</div>
</div>
<div class="helo">
<img src="image/helo.jpg" >
</div>
<div class="footer">
<div class="footer_service">
<ul>
<li>
<img src="image/fix.jpg">
<a href="#">预约维修服务</a>
</li>
<li>
<img src="image/7.jpg">
<a href="#">7天无理由退货</a>
</li>
<li>
<img src="image/15.jpg">
<a href="#">15天免费换货</a>
</li>
<li>
<img src="image/gift.jpg">
<a href="#">满150元包邮</a>
</li>
<li>
<img src="image/local.jpg">
<a href="#">520余家售后网点</a>
</li>
</ul>
</div>
<div class="footer_link">
<div class="footer_help">
<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>
<div class="footer_tel">
<p class="tel">400-100-5678</p>
<p class="time">
周一至周日 8:00-18:00
<br>
（仅收市话费）
</p>
<a href="#">
<img src="image/msg.jpg">
联系客服</a>
</div>
</div>
</div>
<div class="site_info">
<div class="bottom_info">
<div class="bottom_img">
<img src="image/logo.jpg" alt="logo">
</div>
<div class="bottom_text">
<div class="bottom_nav">
<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="#">商城用户协议</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>
</div>
<div class="bottom_info_text">
<a href="#">©mi.com</a> 京ICP证110507号
<a href="#">京ICP备10046444号</a>
<a rel="nofollow" href="#">京公网安备11010802020134号 </a>
<a href="#">京网文[2017]1530-131号</a>
<br>
<a href="#" target="_blank">（京）网械平台备字（2018）第00005号</a>
<a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
<a href="#">营业执照</a>
<a href="#">医疗器械公告</a>
<br>
<a href="#">增值电信业务许可证</a>
网络食品经营备案（京）【2018】WLSPJYBAHF-12
<a href="#">食品经营许可证</a>
<br>
违法和不良信息举报电话：185-0130-1238
<a href= "#">知识产权侵权投诉</a>
本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</div>
<div class="bottom_link">
<img src="image/b1.png" >
<img src="image/b2.png" >
<img src="image/b3.png" >
<img src="image/b4.png" >
<img src="image/b5.png" >
</div>
</div>
</div>
<div class="end">
<p>探索黑科技，小米为发烧而生！</p>
</div>
</div>
<div class="bar">
<div class="bar_link">
<a href="#">
<img src="image/tphone.png" >
<br>
手机APP
</a>
<a href="#">
<img src="image/person.png" >
<br>
个人中心
</a>
<a href="#">
<img src="image/service.png" >
<br>
联系客服
</a>
<a href="#">
<img src="image/shoppingchart.png" >
<br>
购物车
</a>
</div>
<div class="bar_return">
<a href="#">
<img src="image/back.png" >
<br>
回顶部
</a>
</div>
</div>
</body>
</html>
