abstract：在线预览地址：http://www.pursuer.top/xiaomi1/detail.htmlHTML部分：小米商城 在线预览地址：http://www.pursuer.top/xiaomi1/detail.html
HTML部分：
小米商城
特别说明
官方微信
©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
探索黑科技，小米为发烧而生！
css部分：
/*公共样式*/
*{padding:0;margin:0;font-family:Helvetica; }
a{text-decoration: none;cursor:pointer;color:#373737;}
li{list-style:none;}
.clear{clear: both;}
/*头部样式*/
.header{width:100%;height:40px;background-color:#333;}
.menu{width:1226px;height:40px;margin:0 auto;}
.menu .left{float: left;}
.menu .right{float: right;}
.menu .right li{float: right;margin-left: 8px;position: relative;}
.menu .right li .text{z-index:999;width:260px;height:90px;background:#fff;font-size: 12px;color: #ccc;padding:10px;display:none;position: absolute;top:40px;right: 0;text-align: center;}
.menu .right li:hover .text{display:block;}
.menu .right li:hover a{color:#ff6a00;background: #fff; }
.menu a{font-size: 12px;color: #ccc;line-height: 40px;}
.menu a:hover{color: #fff;}
.menu .gwc{width: 120px;height: 40px;background: #424242;display:inline-block;text-align: center;line-height: 40px;}
.menu .gwc:hover{background: #fff;color: #ff6a00;}
.menu .gwc i{margin-right: 8px;}
.menu span{font-size: 12px;color: #ccc;margin:0 6px;}
/*主体样式*/
.main{width:1226px;margin:0 auto;}
.main .detail{
width: 1226px;
height: 500px;
border-top: 1px solid #e0e0e0;
}
/*导航*/
.mainNav{width:1226px;height:66px;margin:10px auto;}
.mainNav_p,.mainNav_ul,.mainNav_s{float:left;}
.mainNav_ul li{font-size:18px;margin:0 8px;line-height: 66px;float: left;}
.mainNav_ul li a{color: #333;}
.mainNav_ul li a:hover{color: #ff6a00;}
.mainNav_s{height:66px;width:312px;float:right;position: relative;}
.mainNav_s input{outline:none;padding:0 10px;height: 50px;width: 228px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;margin: 7px 0;float: left;}
.mainNav_s div{position: absolute;width:120px;top:22px;right:60px;}
.mainNav_s div a{font-size:12px;padding:4px;background:#ebebeb;color: #aaa;}
.mainNav_s div a:hover{background:#ff6a00;color: #fff;}
.mainNav_s .but{cursor:pointer;font-size:22px;line-height:52px;text-align:center;height: 50px;width: 60px;border:1px solid #ccc;margin: 7px 0;position: absolute;top: 0;right: 0;}
.mainNav_s .but:hover{background: #ff6a00;color: #fff;}
/*下拉框*/
.mainNav_ul .mainNav_ul_p{width: 100%;height: 230px;background: #fff;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;position: absolute;left:0;top:116px;display: none;z-index: 999;}
.mainNav_ul li:hover .mainNav_ul_p{display: block;}
.mainNav_ul .mainNav_ul_p .div_p{width: 1226px;height: 230px;margin: 0 auto;}
.mainNav_ul .mainNav_ul_p .div_p_c{width:120px;height:230px;float: left;margin: 0 40px;}
.mainNav_ul .mainNav_ul_p .div_b{width:1px;height:90px;background: #ccc;float: left;margin-top:40px;}
.mainNav_ul .mainNav_ul_p .div_p_c .new{width:60px;height: 18px;border:1px solid #ff6a00;line-height: 20px;text-align: center;margin:10px auto;font-size: 12px;color:#ff6a00;}
.mainNav_ul .mainNav_ul_p .div_p_c img{margin:20px auto;display: block;}
.mainNav_ul .mainNav_ul_p .div_p_c .sp1{height:30px;line-height:30px;display:block;font-size: 14px;text-align:center;color:#333;}
.mainNav_ul .mainNav_ul_p .div_p_c .sp2{height:30px;line-height:30px;display:block;font-size: 14px;text-align:center;color:#ff6a00;}
.mainNav_ul .mainNav_ul_p .div_p_b{border-left: 1px solid #333;width: 2px;height:160px;float: left;}
/*商品详情*/
.detail_shop .detail_shop_s{
width:100%;
height:65px;
background: #fff;
border-top: 1px solid #ccc;
position:absolute;
left:0;
box-shadow:0 2px 5px #e0e0e0;
}
.detail_shop .detail_shop_s .middle{
width: 1226px;
margin:0 auto;
}
.detail_shop .detail_shop_s .middle .left{
line-height: 66px;
float: left;
font-size: 14px;
}
.detail_shop .detail_shop_s .middle .right{
line-height: 66px;
float:right;
font-size: 14px;
}
.detail_shop .detail_shop_s .middle span{
margin:0 10px;
color:#616161;
}
.detail_shop .detail_shop_s .middle a:hover{
color: #ff6700;
}
.detail_shop .detail_shop_l{
width: 560px;
height: 600px;
margin-top:100px;
float: left;
}
.detail_shop .detail_shop_r{
width: 600px;
margin-top:100px;
float:right;
}
.detail_shop .detail_shop_r .chanpin h2{
font-size: 28px;
color: #000;
font-weight: 100;
font-family: Helvetica;
line-height: 37px;
}
.detail_shop .detail_shop_r .chanpin p{
font-size:14px;
color: #aaa;
}
.detail_shop .detail_shop_r .chanpin span{
font-size: 21px;
color: #ff6700;
font-weight: 100;
line-height: 51px;
display: block;
border-bottom: 1px solid #ccc;
}
.detail_shop .detail_shop_r .adress{
width: 538px;
margin: 40px 0;
border:1px solid #ccc;
background: #fafafa;
padding: 30px;
font-size: 14px;
color: #000;
}
.detail_shop .detail_shop_r .adress p{
margin-bottom: 5px;
}
.detail_shop .detail_shop_r .adress i{
margin-right: 5px;
color: #ccc;
}
.detail_shop .detail_shop_r .adress a{
color: #ff6700;
}
.detail_shop .detail_shop_r .adress span{
color: #ff6700;
}
.detail_shop .detail_shop_r .select h2{
font-size: 18px;
color: #333;
margin:20px 0;
font-weight: 100;
}
.detail_shop .detail_shop_r .select .short_kuang,.detail_shop .detail_shop_r .select .color_kuang{
width: 255px;
height: 50px;
border:1px solid #ccc;
line-height:52px;
padding:0 20px;
float: left;
margin:0 3px 3px 0;&am
Correcting teacher：天蓬老师Correction time：2019-09-29 19:36:31
Teacher's summary：完成的相当不错, 至少看上去如此, 还有, div中不要直接放文本, 这是很不好的习惯
