div元素及其属性布局页面

最新推荐文章于 2021-08-03 20:25:57 发布

yin_991

最新推荐文章于 2021-08-03 20:25:57 发布

阅读量708

点赞数

文章标签： html 布局

本文链接：https://blog.csdn.net/yin_991/article/details/78360360

版权

为了页面内容仅以图片来展示简洁的页面，所以我从华为官网截了一个图放到div中（div是html的块元素，能起到自动换行效果），嵌套的div，内部用了浮动属性float，float可以设置left、right，后面的div就要清除浮动，用到clear属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div元素及其浮动属性布局页面</title>
	<style>
		#id3{
			background: url(华为长图.jpg);
			width: 90%;
			height: 500px;
			clear: left;
		}
		.cl1{
			float: left;
			background-color: #008080;
			height: 60px;
			width: 100%;
		}
		#id1{
			width:50%;

		}
		#id2{
			width: 50%;
		}
		#id4{
			background-color: #708090;
			clear: left;
			height: 40px;

		}
	</style>
</head>
<body>
	<div>
		<div class="cl1">
			<div id="id1" style="float: left;">左侧</div>
			<div id="id2" style="float: left;">右侧</div>
		</div>
		
		<div id="id3">
			
		</div>
		<div id="id4">
			底部
		</div>
	</div>
</body>
</html>

效果：