2.完成小米商城实战课程首页布局作业

摘要：<!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">
<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>
<div style="background:url(static/img/longAD2.jpg)">图片部分</div>

<div>智能商品列表部分</div>

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

<div>家电商品列表部分</div>

<div style="background:url(static/img/longAD4.jpg)">图片部分</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;
}


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

2.完成小米商城实战课程首页布局作业

热门词条