仿小米商城-商城底部布局(2)

lzm2019-02-20 15:18:37

<!DOCTYPE html>

<head>

<title>仿小米商城</title>

body,ul,li,dl,dt,dd,p{padding:0;margin:0;}

li{list-style:none;}

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

.clear{clear:both;}

.l{float:left;}

.r{float:right;}

.m_t10{margin-top:10px;}

#wrapper{min-width:1226px;}

/* 页头部分 */

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

.header_menu{width:1226px;height:40px;background:blue;margin:0 auto;}

/* 主体部分 */

#main{width:1226px;margin:0 auto;}

/* 导航 */

.nav{height:70px;background:blue;}

.menu{height:460px;}

.menu_left{width:246px;height:460px;background:cadetblue;}

.menu_right{float:left;width:980px;height:460px;background:chocolate;}

.submenu{height:170px;}

.submenu_left{width:240px;height:170px;margin-right:6px;background:blue;}

.submenu_right{width:980px;height:170px;}

.submenu_right img{float:left;width:317px;height:inherit;margin-right:14.5px;}

.submenu_right img:nth-last-child(1){margin-right:0px;}

/* 小米闪购 */

.shop{height:340px;}

.shop_top{font-size:22px;font-weight:400;height:30px;line-height:30px;}

.shop_bottom{width:100%;height:340px;}

.shop_bottom>div{float:left;width:235px;height:310px;margin-right:12.75px;background:blue;}

.shop_bottom>div:nth-last-child(1){margin-right:0px;}

/* 广告 */

.banner{height:100px;}

.banner img{width:1226px;height:100px;}

/* 手机 */

.guild_top{height:60px;line-height:60px;}

.guild_bottom{height:614px;}

.guild_bottom>div{float:left;width:235px;height:300px;margin-right:12px;background:blue;}

.guild_bottom>div:nth-child(1){height:614px;width:234px;}

.guild_bottom>div:nth-child(1)>img{width:234px;}

.guild_bottom>div:nth-child(5),.guild_bottom div:nth-child(9){margin-right:0px;}

.guild_bottom>div:nth-child(5)~div{margin-top:14px;}

/* 智能 */

.guild1_top{height:60px;line-height:60px;}

.guild1_bottom{height:614px;}

.guild1_bottom>div{float:left;width:235px;height:300px;margin-right:12px;background:blue;}

.guild1_bottom>div>img{width:234px;}

.guild1_bottom>div:nth-child(1),.guild1_bottom div:nth-child(6){width:234px;}

.guild1_bottom>div:nth-child(5),.guild1_bottom div:nth-child(10){margin-right:0px;}

.guild1_bottom>div:nth-child(5)~div{margin-top:14px;}

.guild1_bottom>div:nth-last-child(1){background:none;}

.guild1_bottom>div:nth-last-child(1)>div{height:145px;background:blue;}

.guild1_bottom>div:nth-last-child(1)>div:nth-last-child(1){margin-top:10px;}

/* 页脚 */

#footer{width:1226px;margin:0 auto;}

/* 页脚页头 */

.footer_top{width:1226px;height:20px;line-height:20px;padding:30px 0px;border-bottom:1px solid #e0e0e0;text-align:center;}

.footer_top ul li{float:left;width:240px;border-right:1px solid #e0e0e0;}

.footer_top ul li:nth-last-child(1){border-right:none;}

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

.footer_top a:hover{color:#ff6700;}

.footer_top a i{font-size:20px;margin-right:10px;}

/* 页脚主体 */

.footer_content{width:1226px;padding:30px 0px;}

.footer_content_left{width:960px;height:125px;}

.footer_content_left dl{float:left;width:160px;}

.footer_content_left dt{font-size:15px;height:15px;line-height:15px;color:#424242;margin-bottom:26px;}

.footer_content_left dd{font-size:13px;height:18px;line-height:18px;color:#424242;margin-bottom:10px;}

.footer_content_left dd a{color:#757575;}

.footer_content_left dd a:hover{color:#ff6700;}

.footer_content_right{width:262px;height:125px;border-left:1px solid #e0e0e0;text-align:center;}

.footer_content_right>p{color:#616161;font-size:12px;margin-bottom:10px;}

.footer_content_right>p:nth-child(1){color:#ff6700;font-size:22px;}

.footer_content_right>p>span{display:inline-block;margin-top:5px;}

.footer_content_right>div{margin:0 auto;width:120px;height:28px;line-height:28px;font-size:12px;border:1px solid #ff6700;color:#ff6700;background:#fff;}

.footer_content_right>div:hover{background:#ff6700;color:#fff;cursor:pointer;}

/* 页脚页脚 */

.footer_bottom_content_top ul li{float:left;color:#757575;font-size:12px;height:14px;padding:0px 5px 5px;border-right:1px solid #e0e0e0;}

.footer_bottom_content_top ul li:nth-last-child(1){border-right:0px;}

.footer_bottom_content_bottom{color:#b0b0b0;font-size:12px;padding-left:5px;}

.footer_bottom_content_bottom a{color:#b0b0b0;}

.footer_bottom_content_bottom a:hover{color:#ef3a3b;}

.footer_bottom_right img{height:28px;margin-left:2px;float:left;}

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

.footer_logo{text-align:center;margin:10px 0px;}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div>

</div>

</div>

<div>

</div>

</div>

<ul>

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

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

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

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

</ul>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

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

</dl>

<dl>

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

</dl>

<dl>

</dl>

<dl>

</dl>

</div>

<p>周一至周日 8:00-18:00<br><span>(仅收市话费)</span></p>

</div>

</div>

</div>

<ul>

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

<li>Select Region</li>

</ul>

</div>

京ICP证110507号

<a href="">京ICP备10046444号</a>

<a href="">京公网安备11010802020134号</a>

<br>

违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

</div>

</div>

</div>

</div>

</body>

</html>

仿小米商城-商城底部布局(2)

最新手记推荐

全部回复(0)我要回复