小米商城页面框架：
小米商城
html
小米商城
小米商城|
MIUI|
IOT|
云服务|
小爱分享平台|
金融|
有品|
企业服务|
SelectRegion
登录|
注册|
消息通知
购物车 ( 0 )
购物车中还没有商品，赶紧选购吧！
小米手机
红米
电视
笔记本
盒子
新品
路由器
智能硬件
服务
社区
手机 电话卡
电视机 盒子
笔记本
智能 家电
健康 家居
出行 儿童
路由器 手机配件
移动电源 插线板
耳机 音箱
生活 米兔
选购手机
企业团购
F码通道
米粉卡
以旧换新
话费充值
小米闪购
18:00 场
距离开始还有
00
:
00
:
00
米家空气净化器Pro 白色
大空间，快循环
1399 元
1499元
小米手环 2 黑色
OLED 显示屏，触摸 *** 作
142 元
149元
90分金属旅行箱 20寸 银色
航空系铝镁合金
1709 元
1799元
小米体脂秤 白色
简约纤薄精准掌握身体数据
189 元
199元
预约维修服务
7天无理由退货
15天免费换货
满150元包邮
520余家售后网点
帮助中心
账户管理
购物指南
订单 *** 作
服务支持
售后政策
自助服务
相关下载
线下门店
小米之家
服务网点
授权体验店
关于小米
了解小米
加入小米
投资者关系
关注我们
新浪微博
官网微博
联系我们
特色服务
F码通道
礼物码
防伪查询
Feir-520-1314
周一至周日 8:00-18:00
(仅收市话费)
小米商城
MIUI
米家
米聊
多看
游戏
路由器
米粉卡
政企服务
小米天猫店
隐私政策
问题反馈
Select Region
©mi.com
京ICP证110507号
京ICP备10046444号
京公网安备11010802020134号
京网文[2014]0059-0009号
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
探索黑科技，小米为发烧而生！
下拉菜单
新品
小米2s
3299元
新品
小米2s
3299元
新品
小米2s
3299元
新品
小米2s
3299元
小米2s
3299元
小米2s
3299元
左侧二级导航
小米8
小米MIX2
移动4G+专区
小米8
小米MIX2
移动4G+专区
小米8
小米MIX2
移动4G+专区
小米8
小米MIX2
移动4G+专区
小米8
小米MIX2
移动4G+专区
小米8
小米MIX2
移动4G+专区
css mi.css
*{margin: 0px;padding: 0px;border: none;}
.clear{clear: both;}
li{list-style: none;}
a{text-decoration: none;color: #fff;}
/*头部*/
.header{height: 40px;width: 100%;background: #333;}
.header_menu{width: 1226px;height: 40px; margin:0px auto;}
.header_menu span{margin: 0px 10px;color: #6C6D69;}
.header_menu li a:hover{color: #FFF;}
.header_left{float: left;line-height: 40px;}
.header_left li{color:#ccc;float: left;font-size: 9px;}
.header_right{float: right;height: 40px;line-height: 40px; }
.header_right li{float: left;height: 40px;}
.header_right li a{color:#aaa;font-size:12px; }
.header_right li a:hover{color: #fff;}
.header_right li span{color:#424242;font-size:12px;margin: 0px 5px; }
.header_right_li{width: 120px;height: 40px; text-align:center;background:#424242;color:#aaa;font-size:12px;position: relative;margin-left:10px; }
.header_right_li:hover{color:#FF6A00; background: #fff;}
.header_right_li div{width: 300px;height: 90px;background: #fff;position: absolute;right: 0px;display: none;color: #ccc;z-index: 2;}
.header_right_li:hover div{display: block;}
/*主体内容上*/
.content-top{}
.content{width:1226px;margin: 0 auto; }
/*导航*/
.content_menu{width:1226px;height: 66px;margin: 10px 0px;}
/*导航2*/
.content_menu_pic{float: left;}
.content_menu_ul{float: left;height: 66px;line-height:66px; margin-left: 15px;/*position: relative;*/}
.content_menu_ul li{float: left; margin-right: 10px;font-size: 17px;}
.content_menu_ul li:hover{color:#FF6A00;}
.content-form{position: relative; float: right;width: 314px;height: 63px;padding: 6px 0px;}
.content-form input[type="text"]{width: 250px;height: 50px;float: left;border-left: 1px solid #ccc;border-top: 1px solid #ccc;border-bottom:1px solid #ccc;}
.content-form .botton{width: 60px;height: 50px;float: left;border: 1px solid #ccc;}
.content-form .content-form-a{position: absolute;top: 20px;right: 75px; width: 110px;}
.content-form a {color: #aaa;width: 50px;font-size: 7px;background: #EBEBEB;padding: 3px;}
.content-form a:hover {background:#FF6700;color: #fff;}
.content-form i{position: absolute;top: 20px;right: 25px;font-size: 21px;color: #424242;}
.content-form .botton:hover{border: none;width: 62px;height: 52px; background:#FF6700;color:#fff;}
.content-form .botton:hover i{color:#fff;}
/*下拉*/
.mi_phone{width:100%;height:230px;border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;position:absolute;left: 0px;z-index: 2; background: #fff;display: none;}
.content_menu_ul li:hover .mi_phone{display: block;}
.mi_phone_div .mi_phone_shop{width: 120px; height: 160px;margin-top: 30px;line-height: 30px;}
.mi_phone_div{width: 1226px;height: 230px;margin:0px auto;}
.mi_phone_div_1{margin:0px auto;/*border: 1px solid red;*/padding:0px 50px;}
.mi_phone_div a{color: #000;font-size: 9px;/*margin-left: 15px;*/}
.mi_phone_div span{border-right: 1px solid #ccc;margin:0px 30px;margin-top: 30px;height: 80px;width: 0px;float: left;}
.new{width: 60px;height: 18px;font-size: 9px;position: absolute;top:0px;left:25px; border: 1px solid #FF6A00;color:#FF6A00; line-height: 18px;text-align: center;}
.mi_phone_div .mi_phone1{float: left;width: 181px;height:230px; position: relative;text-align: center;}
.mi_phone_shop {float: left}
/*左边导航*/
.content_pic{width: 1226px;height:460px;background:url(../img/mi.jpg) ;}
.content_pic_menu{width: 246px;height:460px; float: left;background: #424242;position: relative; }
.content_pic_img{width: 980px;height:460px;float: right; }
.content_pic_ul{width: 246px;height: 440px; margin:30px 0px;}
.content_pic_ul li{width: 246px;height: 40px;line-height: 40px;font-size:15px;color: #fff;}
.content_pic_ul li i{font-size: 15px;font-weight: bold;float: right;margin-right:20px;margin-top: 13px;}
.content_pic_ul li a{margin-left: 20px;}
.content_pic_ul li:hover{background:#FF6A00; }
.content_pic_div{height: 460px;width:900px;background: #fff;position: absolute;top: 0px; left:235px;display: none;}
.content_pic_ul li:hover .content_pic_div {display: block;}
.content_div_menu{width:880px; height:440px;margin: 10px 10px; }
.content_div_1{width: 880px;height:70px; margin-top: 5px;}
.content_div_1 div{width: 280px;float: left;height:70px;/*border: 1px solid #ccc;*/margin-right: 10px;}
.content_div_1 div img{width:40px;height: 40px;margin: 15px 0px;float: left;}
.content_div_1 div a{color:#000;float: left;margin-top: 17px;}
.content_div_1 div:hover a{color:#FF6A00;}
/*
小米闪购*/
.content-picli{height: 170px;width:1226px;margin-top: 10px;}
.content-picli_1{height: 170px;width: 235px; float: left;background:#5F5750;margin-right: 14.3px;}
.content-picli_2{height: 170px;width: 316px;float: left;background:url(../img/midAD1.jpg);margin-right:14.3px;}
.content-picli_3{height: 170px;width: 316px;float: left;background:url(../img/midAD2.jpg);margin-right: 14.3px;}
.content-picli_4{height: 170px;width: 316px;float: left;background:url(../img/midAD3.jpg);}
.content-picshop1{height: 50px;width:1226px; }
.content-picshop2{height: 340px;width:1226px; }
.content-picshop3{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;}
.content-picshop4{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;}
.content-picshop5{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;}
.content-picshop6{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;}
.content-picshop7{float: left;height: 340px;width:235px; background:#ccc;}
.content-pic{height: 119px;width: 1226px;background: url(../img/longAD1.jpg);margin: 40px 0px;}
/*底部*/
.footer-top{}
.footer-top_li{width: 1226px;margin: 0px auto;}
.footer-top_li_1{width: 1126px;height: 80px;margin: 0px auto;line-height: 80px;}
.footer-top_li_1 a{color:#616161;font-size: 16px; font-weight: 300;}
.footer-top_li_1 a:hover{color:#FF6700;}
.footer-top_li_1 a i{margin-right: 10px;font-size: 20px;}
.footer-top_li_1 span{color:#616161;margin:0 56px;font-size: 20px;border-left: 1px solid #e0e0e0;}
.footer-top_li .separate{display:block;width: 1226px;height:0;border-bottom: 1px solid #e0e0e0;}
.footer-top_li_2 {width: 1226px;height: 100px;border:0;padding:40px 0;}
.footer-top_li_2
.footer-bottom{height:100px; background:#F5F5F5;}
.footer-bottom_li{width: 1226px;margin: 0px auto;}content.css
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }
/*大导航下面的六个小css块样式*/
.content-picli_1 li { width: 33%; height: 60px; color: #ccc; font-size: 14px; float: left; text-align: center; margin-top: 20px; }
.content-picli_1 li span { width: 100%; height: 30px; float: left; text-align: center; }
.content-picli_1 li:hover { color: #eee; }
/*重写二级标题样式,包括小米闪购和下面的一堆二级标题*/
.content-picshop h2,
.content-bottom h2 { height: 56px; line-height: 50px; font-size: 22px; padding-top: 20px; margin: 0; font-weight: 300; }
.content-bottom h2 .tab { float: right; color: #424242; font-size: 16px; font-weight: normal; line-height: 60px; }
/*优化长广告 覆盖mi.css*/
.content-bottom2_pic,
.content-bottom3_pic,
.content-bottom7_pic { margin-top: 40px; }
/*小米闪购*/
/*重写height和padding-top 覆盖mi.css*/
.content-picshop3,
.content-picshop4,
.content-picshop5,
.content-picshop6,
.content-picshop7 { border-top: 1px solid; padding-top: 40px; height: 300px; background-color: #fff; position: relative; }
.content-picshop4,
.content-picshop5,
.content-picshop6,
.content-picshop7 { color: #333; }
/*浅灰色背景*/
.bg { background-color: rgba(0, 0, 0, 0.02); width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
/*闪购倒计时*/
.content-picshop3 { border-color: #e53935; background-color: #f1eded; }
.content-picshop3 div { width: 100%; text-align: center; }
.content-picshop3 .time { font-size: 24px; color: #ef3a3b; margin-top: 15px; }
.content-picshop3 .flash { height: 64px; margin: 25px 0; }
.content-picshop3 .detail { line-height: 22px; color: rgba(0, 0, 0, 0.54); font-size: 15px; }
.content-picshop3 .clock { color: #605751; font-size: 24px; line-height: 46px; margin-top: 30px; }
.clock .hour,
.clock .minute,
.clock .second { display: inline-block; background-color: #605751; width: 46px; height: 46px; color: #fff; }
/*闪购item*/
.content-picshop4 { border-color: #ffac13; }
.content-picshop5 { border-color: #83c44e; }
.content-picshop6 { border-color: #2196f3; }
.content-picshop7 { border-color: #e53935; }
.picshopImg { width: 160px; height: 160px; margin: 0 38px 22px; }
.picshopTitle { width: 100%; font-size: 14px; margin: 0 3px; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; }
.picshopDesc { width: 100%; font-size: 12px; color: #b0b0b0; text-align: center; margin: 8px 0 12px; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.picshopPrice { width: 100%; text-align: center;font-size: 13px; color: #b0b0b0; }
footer.css
dl,dd,dt{
list-style: none;
padding:0;
margin:0;
}
/*底部top*/
.footer-top_li_a dl{
display: block;
float: left;
width: 160px;
}
.footer-top_li_a dt{
font-size: 14px;
line-height:14px;
color:#424242;
margin-bottom:26px;
}
.footer-top_li_a dd{
height: 18px;
font-size: 12px;
line-height: 18px;
margin-top: 10px;
}
.footer-top_li_a dd a{
color: #757575;
}
.footer-top_li_a dd a:hover{
color:#ff6700;
}
.footer-top_li_a .connect{
float: right;
width:258px;
height: 112px;
border-left: 1px solid #e0e0e0;
text-align: center;
}
.connect .telephone{
color: #ff6700;
margin: 0 0 5px;
font-size: 22px;
line-height: 22px;
}
.connect .time{
color:#616161;
margin:0 0 16px;
font-size: 12px;
}
.connect button{
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
border:1px solid #ff6700;
color: #ff6700;
background-color: #fff;
}
.connect button:hover{
background-color: #ff6700;
color: #fff;
}
/*底部bottom*/
.footer-bottom_li_1,.footer-bottom_li_2,.footer-bottom_li_3{
float: left;
margin-right: 10px;
}
.footer-bottom_li_4{
clear: left;
margin-top: 15px;
width:1226px;
text-align: center;
font-family: "楷体";
font-size: 24px;
color: #ccc;
}
.footer-bottom_li_a{
height:19px;
width: 640px;
}
.footer-bottom_li_a li{
height:19px;
font-size: 12px;
float: left;
color: #757575;
}
.footer-bottom_li_a li span{
width:0px;
height:10px;
border-left: 1px solid #b0b0b0;
margin:3px 3px;
}
.footer-bottom_li_a li:hover{
color:#ef3a3b;
}
.footer-bottom_li_b{
width:640px;
color: #b0b0b0;
font-size: 12px;
}
.footer-bottom_li_b a{
color:#b0b0b0;
}
.footer-bottom_li_b a:hover{
color:#ef3a3b;
}
.footer-bottom_li_3 {
float: right;
}
.footer-bottom_li_3 img{
display:block;
width:83px;
float: left;
margin-right: 10px;
}欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）