欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

DIV布局（Html基础）8

程序员文章站 2022-04-25 11:17:49
...
<!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>

 

相关标签： HTML基础 html css

上一篇： CSS 外边距

下一篇： CSS选择器（Html基础）6

推荐阅读