热门搜索

5.完成小米商城实战布局底部信息案例

原创 2018-12-12 00:30:41 334
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="sta 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="static/img/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" type="text/css" href="static/font/css/font-awesome.min.css">
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<title>小米商城练习</title>

</head>
<body>
<!-- 头部 -->
<div>
<div>头部导航</div>
</div>
<!-- 主体部分 -->
<div>
<div>主体顶部导航部分</div>

<!-- 主体竖导航部分 -->
<div>
<div></div>
<div></div>
</div>
<div></div>

<!-- 栏目分类部分 -->
<div>
<div>栏目分类</div>
<div style="background:url(static/img/midAD1.jpg)"></div>
<div style="background:url(static/img/midAD2.jpg)"></div>
<div style="background:url(static/img/midAD3.jpg)"></div>
</div>
<div></div>


<!-- 小米闪购部分 -->
<div>
<h2 style="text-align:left;">小米闪购</h2>
<div style="margin-right :12px; border-top:1px solid red;"></div>
<div style="margin-right :12px; border-top:1px solid red;"></div>
<div style="margin-right :12px; border-top:1px solid blue;"></div>
<div style="margin-right :12px; border-top:1px solid green;"></div>
<div style="border-top:1px solid red;"></div>

</div>
<div></div>

<div style="background:url(static/img/longAD1.jpg)"></div>
</div>



<div >
<!-- 手机商品列表部分 -->
<div>
<div>
<h2 style="float:left;display:block;">手机</h2>
<span style="float:right;">查看更多</span>
</div>
<div>
<img src="static/img/buy/手机AD.jpg">
</div>
<div>
<div style="margin-right:12.5px;"></div>
<div  style="margin-right:12.5px;"></div>
<div  style="margin-right:12.5px;"></div>
<div></div>

<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-top:10px;"></div>
</div>
</div>

<div></div>
<div style="background:url(static/img/longAD2.jpg)"></div>

<div>
<div>
<h2 style="float:left;display:block;">智能</h2>
<span style="float:right;">查看更多</span>
</div>
<div>
<div><img src="static/img/buy/家电AD1.jpg"></div>
<div style="margin-top:9px;">
<img src="static/img/buy/家电AD2.jpg">
</div>
</div>
<div>
<div style="margin-right:12.5px;"></div>
<div  style="margin-right:12.5px;"></div>
<div  style="margin-right:12.5px;"></div>
<div></div>

<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-top:10px;">
<div></div>
<div style="margin-top:10px;"></div>
</div>
</div>

</div>

<div></div>
<div style="background:url(static/img/longAD3.jpg)"></div>

<div>
<div>
<h2 style="float:left;display:block;">家电</h2>
<span style="float:right;">查看更多</span>
</div>
<div>
<div><img src="static/img/buy/智能AD1.jpg"></div>
<div style="margin-top:9px;">
<img src="static/img/buy/智能AD2.jpg">
</div>
</div>
<div>
<div style="margin-right:12.5px;"></div>
<div  style="margin-right:12.5px;"></div>
<div  style="margin-right:12.5px;"></div>
<div></div>

<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-right:12.5px; margin-top:11px;"></div>
<div style="margin-top:10px;">
<div></div>
<div style="margin-top:10px;"></div>
</div>
</div>
</div>

<div></div>

<div style="background:url(static/img/longAD4.jpg)"></div>

</div>


<!-- 底部 -->

<div>
<div>
<div>
<!-- ************************顶部1****************************** -->
<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-gift"></i>满150元包邮</a><span></span>
<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
</div>
<span></span>

<!-- **************************顶部2*****************************  -->
<div>
<div>
<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>
<p>Feir-520-1314</p>
<p>周一至周日 8:00-18:00<br>(仅收市话费)</p>
<div ><button><span class="fa fa-commenting "></span> 联系客服</button></div>

</div>

</div>
</div>
<div></div>

<!-- **************************页脚中部*********************************** -->
<div >
<div>
<img src="static/img/footlogo.png">
</div>
<div>
<div>
<ul>
<li>小米商城<span></span></li>
<li>MIUI<span></span></li>
<li>米家<span></span></li>
<li>米聊<span></span></li>
<li>多看<span></span></li>
<li>游戏<span></span></li>
<li>路由器<span></span></li>
<li>米粉卡<span></span></li>
<li>政企服务<span></span></li>
<li>小米天猫店<span></span></li>
<li>隐私政策<span></span></li>
<li>问题反馈<span></span></li>
<li>Select Region</li>
</ul>
</div>
<br>
<div>
<a href="">©mi.com</a>
京ICP证110507号
<a href="">京ICP备10046444号</a>
<a href="">京公网安备11010802020134号</a>
<a href="">京网文[2014]0059-0009号 </a><br>
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</div>
</div>


<div>
<img src="static/img/footericon1.png">
<img src="static/img/footericon2.png">
<img src="static/img/footericon3.png">
<img src="static/img/footericon4.png">
<img src="static/img/footericon5.png">
</div>

</div>
<div></div>
<!-- ************************页脚底部**************************************  -->
<div >探索黑科技，小米为发烧而生！</div>
</div>
</div>
</body>
</html>
*{margin:0px;padding: 0px;}
a{text-decoration: none;}
li{list-style: none;float: left;cursor: pointer;}
.clear{clear: both;}
/*头部信息样式：*/
.head{width: 100%;background-color: #333333;}
.head_menu{width:1225px;
			height: 30px;
			border:1px solid #000;
			background-color: #ccc;
			margin:0px auto;
			line-height: 30px;
			text-align: center;
		}
/*主体上部白色背景部分样式：*/
.contents1{
	width: 100%;
	background-color: #fff;
	margin-top: 10px;
	
}

/*主体导航部分*/
.contents1_menu{
	width: 1225px;
	height: 80px;
	background-color: #fff;
	border:1px solid #000;
	margin:0px auto;
}
/*主体竖导航部分*/
.contents1_menu2{
	width: 1225px;
	margin:0px auto;
	margin-top: 10px;
}

.contents1_menu2_l{
	width:240px;
	height: 462px;
	background-color: #393939;
	float: left;
}

.contents1_menu2_r{
	width: 980px;
	height: 462px;
	background-color: blue;
	float: right;
}

/*主体分类部分*/
.contents1_column{
	width: 1225px;
	margin:0px auto;
	margin-top: 10px;
}
.contents1_column_l{
	width: 240px;
	height: 170px;
	float: left;
	background-color:#5F5750;
}

.contents1_column_r{
	width:318px;
	height: 170px;
	background-color: #ccc;
	float: left;
	margin-left: 10px;
}

/*主体小米闪购部分*/
.contents1_shop{
	width: 1225px;
	margin:0px auto;
	margin-top: 10px;
}

.contents1_shop_1{
	width: 235px;
	height: 380px;
	float: left;

	background-color: #ccc;

}


/*图片部分*/
.contents_img{
	width: 1225px;
	height: 100px;
	margin: 0px auto;
	margin-top: 10px;
	background-color: #393939;
}

/*主体下部灰色背景部分样式：*/
.contents2{width: 100%;background-color: #ccc;margin-top: 10px;}

/*商品列表部分*/
.contents_comlist{
	width: 1225px;
	margin: 0px auto;
	margin-top: 10px;
	}

.contents_comlist_t{
	width: 100%;
	height:70px;
	line-height: 70px;
	}

.contents_comlist_l{
	float: left;
	width:234px;
	height: 614px;
	}

.contents_comlist_r{
	float: right;
	height: 610px;
	width: 978px;
	}

.contents_comlist_r_1,.contents_comlist_r_0{
	width: 235px;
	height: 300px;
	float: left;
	background-color:#fff;
}


.contents_comlist_l_t .contents_comlist_l_b{
	width: 236px;
	height: 303px;

}

.contents_comlist_r_2{
	width: 235px;
	height: 145px;
	background-color: blue;
}


/*底部信息样式：*/
.bottom{width: 100%;background-color: #fff;}
/*底部内容部分*/
.botton_con{
	width: 1225px;
	height: 200px;
	margin: 0px auto;
	margin-top: 10px;
}

.botton_con_t_1{
	width:1225px;
	line-height: 60px;
	font-size: 15px;
	text-align: center;
}

.botton_con_t_1 a{
	font-size: 15px;
	color: #616161;
	margin:auto 58px;
}

.botton_con_t_1 a:hover{
	color: #FF6700;
}

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

.botton_con_t_1 a i:hover{
	color: #FF6700;
}


.botton_con_t_1 span{
	width: 0px;
	height: 25px;
	border-right: 1px solid #ccc;
}

.botton_con_line{
	width: 1225px;
	border-bottom: 1px solid #ccc;
	display: inline-block;
}

.botton_con_t_21{
	
}

.botton_con_t_21 dl{
	float: left;
	margin-right: 100px;
	margin-top: 30px;
	
}

.botton_con_t_21 dt{
	color: #424242;
	font-size: 14px;
	margin-bottom: 20px;
}

.botton_con_t_21 dd{
	margin-bottom: 7px;
}

.botton_con_t_21 dd a{
	color: #757575;
	font-size: 11px;
}

.botton_con_t_21 dd a:hover{
	color: #FF6700;
}

.botton_con_t_22{
	border-left: solid 1px #ccc;
	height: 113px;
	width: 260px;
	float: right;
	margin-top: 35px;
}

.botton_con_t_22_t{
	font-size: 20px;
	color: #FF6700;
	line-height: 30px;
	text-align: center;
}

.botton_con_t_22_c{
	font-size: 10px;
	color: #616161;
	line-height: 16px;
	text-align: center;	
}

.botton_con_t_22_b{
	text-align: center;
	margin-top: 10px;		
}

.botton_con_t_22_b button{
	color: #FF6700;
	border:1px solid #FF6700;
	background: #fff;
	width: 117px;
	height: 28px;
	font-size: 11px;
}

.botton_con_t_22_b button:hover{
	background: #FF6700;
	color: #fff;
	font-size: 11px;
}

/*****************页脚中间**********************/

.botton_con_c{
	margin-top: 20px;
}

.botton_con_c_l{
	float: left;
	display: block;

}

.botton_con_c_c{
	float: left;
	margin-left: 20px;
	
}

.botton_con_c_c1{
	cursor: auto;
	font-size: 11px;
	color: #757575;
	width: 620px;	

}

.botton_con_c_c2{
	font-size: 11px;
	color: #B0B0B0;
}

.botton_con_c_c2 a{
	font-size: 10px;
	color: #ccc;
}

.botton_con_c_c2 a:hover{
	color: #EF3A3B;
}

.botton_con_c span{
	height: 5px;
	width: 0px;
	border-right: 1px solid #ccc;
	margin:3px;

}

.botton_con_c_r{
	float: left;
	margin-left: 90px;
	display: block;
}

.botton_con_c_r img{
	height: 30px;
	width: 84px;
	float: left;
}

.botton_con_b{
	font-size: 20px;
	line-height: 20px;
	height: 20px;
	text-align: center;
	color: #ccc;
}

20181212002804.png

批改老师：韦小宝批改时间：2018-12-12 09:12:00
老师总结：写的很不错！和上篇相比完成了底部的布局！代码完整！内容清晰！完成小米的前端案例也是一大进步了！当然课后还可以多找点案例来仿写哦！

发布手记

热门词条

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 增值电信业务经营许可证：苏B2-20210495

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved 湘ICP备2023035733号 关于我们免责申明