DIV布局（Html基础）8 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html基础</title>
		<style>
			#div1{
				width: 100%;
				height: 50px;
				background-color: chartreuse;
				float: left;
			}
			ul{
				list-style-type: none;
			}
			li{
				text-align: center;
				width: 80px;
				float: left;
			}
			li:hover{
				background-color: cadetblue;
			}
			#div2{
				width: 100%;
				height: 150px;
				background-color: aqua;
			}
			#div3{
				width: 50%;
				height: 150px;
				background-color: #7FFF00;
				float: right;
			}
			#div4{
				width: 50%;
				height: 150px;
				background-color: crimson;
				float: left;
			}
			#div5{
				width: 100%;
				height: 150px;
				background-color: aqua;
				float: left;
			}
			
			#div6{
				width: 100%;
				height: 150px;
				background-color: darkmagenta;
				float: right;
			}
			#div7{
				width: 50%;
				height: 150px;
				background-color: crimson;
				float: left;
			}
			#div9{
				width: 50%;
				height: 150px;
				background-color: #7FFF00;
				float: left;
			}
			#div8{
				width: 50%;
				height: 300px;
				background-color: grey;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li>首页</li>
				<li>家用电器</li>
				<li>图书</li>
			</ul>
		</div>
		
		<br /><br /><br />
		
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
		<div id="div5"></div>
		
		
		
		<div id="div6"></div>
		<div id="div7"></div>
		<div id="div8"></div>
		<div id="div9"></div>
	</body>
</html>

 

posted @ 2020-11-04 11:22  余光都是你  阅读(225)  评论(0)    收藏  举报