常见网页布局HTML+CSS

最新推荐文章于 2022-11-25 11:29:25 发布

gentleman4

最新推荐文章于 2022-11-25 11:29:25 发布

阅读量432

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/apple_52826096/article/details/125626245

版权

常见网页布局
代码：


```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.top{
				height: 50px;
				background-color:#b0b0b0;
				border: 1px red dotted;
				text-align: center;
				line-height: 50px;
			}
			.banner{
				height: 100px;
				width: 980px;
				background-color:#b0b0b0;
				border: 1px red dotted;
				margin: 10px auto;
				text-align: center;
				line-height: 100px;
			}
			.box1{
				height: 150px;
				width: 980px;
				/* background-color: #b0b0b0; */
				/* border: 1px red dotted; */
				margin: 10px auto;
			}
			.box1 ul li{
				width: 235px;
				height: 148px;
				background-color: #b0b0b0;
				border: 1px red dashed;
				float: left;
				margin-right: 10px;
				text-align: center;
				line-height: 148px;
			}
			li{
				list-style: none;
			}
			.box1  #last{
				margin-right: 0px;
				
			}
			.box2{
				height: 300px;
				width: 980px;
				/* background-color: #b0b0b0; */
				margin: 10px auto;
				
			}
			.box2 ul li{
				height: 298px;
				width: 235px;
				background-color: #b0b0b0;
				border: 1px red dashed;
				float: left;
				margin-right: 10px;
				text-align: center;
				line-height: 298px;
				
			}
			.box2 .last{
				margin-right: 0px;
			}
			.footer{
				height: 40px;
				background-color: #b0b0b0;
				border: 1px red dashed;
				text-align: center;
				line-height:40px;
			}
			
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="box1">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li id="last">4</li>
			</ul>
			
		</div>
		<div class="box2">
			<ul>
				<li>A</li>
				<li>B</li>
				<li>C</li>
				<li class="last">⃣️D</li>
			</ul>
		</div>
		<div class="footer">footer</div>
	</body>
</html>