小米商城首页基本框架

肖凌2019-05-26 16:50:34

/*css部分*/

*{margin:0;padding:0;}

li{list-style:none;}

a{text-decoration:none;color:#ccc;cursor:pointer;}

.fl{float:left;}

.fr{float:right;}

.clear{clear:both;}

/*头部样式*/

.header{background:#333;width:100%;height:40px;}

.menu{width:1226px;height:40px;margin:0 auto;}

.menu{font-size: 12px;}

.menu-left li{float:left;line-height: 40px;}

.menu-left li a:hover{color:#fff;}

.menu-left li span{margin: 0 10px;color:#6c6d69;}

.menu-right{float:right;}

.menu-right li{float:left;line-height: 40px;}

.menu-right li a:hover{color:#fff;}

.menu-right li span{margin: 0 10px;color:#6c6d69;}

.buy-car{width:120px;height:40px;text-align:center;background: #424242;color:#aaa;margin-left: 10px;position:relative;}

.buy-box{width:300px;height:90px;background: #fff;color:#ccc;position:absolute;right:0px;display:none;z-index: 99;}

.buy-car:hover .buy-box{display:block;}

.buy-car:hover{color:#ff6700;background:#fff;}

.buy-car:hover a{color:#ff6700;}

/*主体样式*/

.content{width:1226px;margin:10px auto;}

.outContent{width:100%;background: #f5f5f5;}

.contentMenu{width:100%;height:66px;margin:10px auto;}

.menuUl{line-height: 66px;height:66px;margin-left: 15px;}

.menuUl li{float:left;margin-right: 10px;}

.menuUl li:hover .menuPhone{display: block;}

.menuPhone{display:none;width:100%;height:230px;background: #fff;border-top:1px solid #ccc;border-bottom: 1px solid #ccc;position:absolute;left:0px;top:126px;}

.phoneItems{width:1226px;height:230px;margin:0 auto;}

.phoneItems span{width:0px;height:80px;border-right:1px solid #ccc;float:left;margin-top: 48px;}

.phoneItem{width:181px;height:230px;line-height:230px;text-align: center;font-size: 12px;color:#aaa;}

.new{width:60px;height:18px;border:1px solid #ff6700;color:#ff6700;line-height: 18px;text-align: center;margin: 10px auto 20px;}

.phoneNew{line-height: 30px;}

.menuForm{width:314px;height:63px;position:relative;margin-top: 5px;}

.menuForm input{width:240px;height:50px;float:left;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding-left: 10px;}

.button{border:1px solid #ccc;height:50px;width:50px;float:left;line-height: 50px;text-align: center;}

.button i{font-size: 22px;color:#424242;}

.button:hover{background: #ff6700;width:52px;height:52px;border:none;}

.button:hover i{color: #fff;}

.menuFrom-a{position:absolute;top:20px;left:140px;font-size:12px;background: #ebebeb;color:#aaa;}

.menuFrom-b{position:absolute;top:20px;left:200px;font-size:12px;background: #ebebeb;color:#aaa;}

.menuFrom-a a:hover{background: #ff6700;}

.menuFrom-b a:hover{background: #ff6700;}

.contentPic{width:100%;margin:10px auto;}

.contentPic_l{width:246px;height:460px;background:#424242;}

.contentPic_l ul{width:246px;height:440px;margin:30px 0px;}

.contentPic_l ul li{width:236px;height:40px;line-height:40px;font-size: 15px;color:#fff;padding-left: 10px;position:relative;}

.contentPic_l ul li i{font-weight:bold;font-size: 15px;float:right;line-height: 40px;margin-right: 20px;}

.contentPic_l ul li:hover{background: #ff6700;}

.contentPic_l ul li a:hover{color: #fff;}

.contentPic_l ul li:hover .lMennitem{display: block;}

.lMennitem{width:800px;height:460px;position:absolute;top:-30px;left:246px;background: #fff;display: none;}

.lMennitem-1{float:left;margin: 25px 0px;}

.lMennitem-1 img{float:left;width:40px;height:40px;margin-left:10px;}

.lMennitem-1 div{float:left;width: 250px;height:40px;}

.lMennitem-1 div a{float:left;color:#424242;}

.lMennitem-1 div:hover a{color:#ff6700!important;}

.lMennitem-1 div a{color:#ff6700;}

.contentPic_r{width:980px;height:460px;background:#4c004c;}

.contentPic-ul{width:100%;height:170px;margin:10px auto;}

.contentPic-ul-1{width:235px;height:170px;background:#5f5750;margin-right:13px;}

.conPan ul{padding:20px 10px;}

.conPan ul li{float:left;color:#ccc;font-size: 15px;line-height: 30px;text-align:center;width:60px;margin-bottom: 10px;}

.contentPic-ul-2{width:317px;height:170px;}

/*小米闪购*/

.contentShop{width:100%;margin:10px auto;}

.contentShop-1{width:235px;height:340px;background:;text-align: center;position:relative;}

.time{height:30px;line-height:30px;text-align:center;margin:30px auto 10px;color:red;font-size: 22px;}

.flashIcon{height:80px;line-height:80px;text-align:center;}

.start{height:50px;line-height:50px;text-align:center;}

.clock{width:100%;height:46px;line-height:46px;text-align:center;color:#605751;font-size:24px;}

.clock span{display: inline-block;color:#fff;}

.clock .time{background: #605757;width: 46px;height: 46px;line-height: 46px;text-align: center;}

.contentShop-1 .shopImg img{width:160px;height:160px;margin:30px auto 10px;}

.contentShop-1 .shopTitle{font-size:14px;color:#616161;}

.contentShop-1 .shopDetail{font-size:12px;color:#ccc;margin:10px 0px;}

.contentShop-1 .bg{background: rgba(0,0,0,0.02);width:100%;height:100%;position:absolute;top:0px;left:0px;}

.shopPirce{font-size:12px;color:#ccc;}

.shopPirce span{font-size:12px;color:#ff6100;margin-right:20px; }

.contentImg{width:100%;height:100px;margin:10px auto;}

.contentUl{width:100%;height:60px;margin:10px auto;line-height: 60px;text-align: center;}

.contentUl h2{font-size: 20px;font-weight: 400px;margin-left:10px;}

.contentUl div{float:right;margin-right: 10px;}

.contentUl div span{float:right;width:20px;height:20px;background: #ccc;border-radius:10px;display: block;line-height: 20px;text-align: center;margin-top: 20px;margin-left: 10px;color:#fff;}

.contentUl div ul{float:right;margin:15px 0px;}

.contentUl div ul li{float:left;margin-right:10px; height: 30px;line-height: 30px;text-align: center;}

.contentUl div ul li:hover{color:#ff6700;border-bottom: 2px solid #ff6700; }

.contentPhone{background:#ccc;margin:10px auto;}

.contentPhone-1{background:#ccc;width:234px;height:614px;background:url(../img/buy/手机AD.jpg);margin-right: 12px;}

.contentPhone-2{width:980px;height:614px;text-align: center;}

.contentPhone-2 div{background:#fff;width:235px;height:300px;float:left;}

.conItem{color:#616161;font-size:12px;position: relative;}

.conItem img{witdh:160;height:160px;margin-top:20px;}

.conItem p{margin:10px auto;}

.conFlag{width:80px;background: red;color:#fff;position: absolute;left:80px;top:0px;}

.contentPhone-a{width: 235px;height:300px;background:#fff;}

.contentPhone-b{width: 235px;height:300px;background:#fff;text-align: center;position: relative;}

.contentPhone-b:hover .disSucces{display: block}

.contentPhone-b-1{width: 235px;height:145px;background:#ccc;}

.disSucces{display:none;width:235px;height:45px;background: #ff6700;color:#fff;padding-top: 10px;position:absolute;top:235px;left:0px;}

/*底部内容*/

.footer{background:#fff;width:1226px;height:100px;margin:10px auto;}

.foot-top{width:100%;height:80px;line-height:80px;text-align:center;}

.foot-top a{font-size: 16px;color:#616161;font-weight:300px;}

.foot-top a:hover{color:orange;}

.foot-top span{font-size: 20px;color:#616161;border-left:1px solid #e0e0e0;margin:0px 56px;}

.separate{border:1px solid #e0e0e0;display:block;}

.foot-middle{margin-top: 20px;}

.foot-middle dl{float:left;width:160px;}

.foot-middle dt{font-size:14px;line-height:14px;color:#424242;margin-bottom:26px;}

.foot-middle dd{font-size:12px;line-height:12px;color:#424242;margin-top:10px;}

.foot-middle dd a{color:#757575;}

.foot-middle dd a:hover{color:#ff6700;}

.connect{width:258px;height:112px;border-left:1px solid #e0e0e0;float:right;text-align:center;}

.tele{color:#ff6700;margin:0 0 5px;font-size:22px;line-height: 22px;}

.timer{color:#616161;margin:0px 16px;font-size: 12px;}

.connect button{border:1px solid #ff6700;width:118px;height:28px;font-size: 12px;line-height:28px;color:#ff6700;background:#fff;margin-top: 20px;}

.connect button:hover{background: #ff6700;color:#fff;}

.foot-bottom{margin-top: 20px;}

.foot-bottom-middle-a{width:640px;}

.foot-bottom-middle ul li{height:19px;float:left;font-size: 12px;}

.foot-bottom-middle span{height:2px;color:#757575;border-left:1px solid #b0b0b0;margin:3px 3px;}

.foot-bottom-middle-b{width:640px;color:#b0b0b0;font-size: 12px;margin-top: 5px;display: inline-block;}

.foot-bottom-right img{width:83px;}

/*index.html*/

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li><a href="#">小爱分享平台</a><span>|</span></li>

<li><a href="#">SelectRegion</a><span>|</span></li>

</ul>

<div class="buy-box">购物车中还没有商品，赶紧选购吧</div>

</li>

</ul>

</div>

</div>

<li>小米手机

</div>

</div>

</div>

</div>

</li>

</ul>

<form>

</form>

</div>

<ul>

<li><a href="">手机电话卡</a><i class="fa fa-angle-right"></i>

</div>

</div>

</div>

</li>

<li><a href="">电视机盒子</a><i class="fa fa-angle-right"></i></li>

<li><a href="">路由器手机配件</a><i class="fa fa-angle-right"></i></li>

<li><a href="">移动电源插线板</a><i class="fa fa-angle-right"></i></li>

</ul>

</div>

</div>

<ul>

</ul>

</div>

</div>

<div class="start">距离开始还有</div>

</div>

<p class="shopTitle">米家空气净化器Pro白色</p>

</div>

<p class="shopTitle">米家空气净化器Pro白色</p>

</div>

<p class="shopTitle">米家空气净化器Pro白色</p>

</div>

<p class="shopTitle">米家空气净化器Pro白色</p>

</div>

</div>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<p>光学变焦双摄，拍人更美</p>

</div>

<ul>

</ul>

</div>

<p>光学变焦双摄，拍人更美</p>

<span>安装师傅很给力<br>

来自于某某的评价

</span>

</p>

</div>

<p>光学变焦双摄，拍人更美</p>

<span>安装师傅很给力<br>

来自于某某的评价

</span>

</p>

</div>

<p>光学变焦双摄，拍人更美</p>

<span>安装师傅很给力<br>

来自于某某的评价

</span>

</p>

</div>

<p>光学变焦双摄，拍人更美</p>

<span>安装师傅很给力<br>

来自于某某的评价

</span>

</p>

</div>

<p>光学变焦双摄，拍人更美</p>

<span>安装师傅很给力<br>

来自于某某的评价

</span>

</p>

</div>

<p>光学变焦双摄，拍人更美</p>

<span>安装师傅很给力<br>

来自于某某的评价

</span>

</p>

</div>

<p>光学变焦双摄，拍人更美</p>

<span>安装师傅很给力<br>

来自于某某的评价

</span>

</p>

</div>

</div>

<ul>

</ul>

</div>

</div>

</div>

</div>

<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>

<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a><span></span>

<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>

<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd><a href="#">授权体验店</a></dd>

</dl>

<dl>

<dd><a href="#">投资者关系</a></dd>

</dl>

<dl>

</dl>

<dl>

</dl>

<p class="timer">周一至周日 8:00-18:00<br>仅收市话费</p>

</div>

</div>

<ul>

<li>小米天猫店<span></span></li>

<li>Select Region</li>

</ul>

</div>

©mi.com 京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2014]0059-0009号违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

</div>

</div>

探索黑科技，小米为发烧而生！

</div>

</body>

</html>

小米商城首页基本框架

最新手记推荐

全部回复(0)我要回复