11.两种简单DIV+Css布局形式的实现案例

最新推荐文章于 2023-03-25 17:26:45 发布

neilro

最新推荐文章于 2023-03-25 17:26:45 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.csdn.net/neilro/article/details/79157267

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

案例1：

案例2：

案例1代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>浮动布局</title>
	<style type="text/css">
		.head,.main,.bottom{
			margin:0;
			padding: 0;
		}
		.head{
			width:400px;
			height:100px;
			background:#000000;
		}
		.main{
			margin:5px 0;
			width:400px;
			height:400px;
		}
		.left{
			margin-right:5px;
			width:245px;
			height:400px;
			background:orange;
			float: left;
		}
		.right{
			width:150px;
			height:400px;
			background:green;
			float:right;
		}
		.bottom{
			width:400px;
			height:100px;
			background:pink;
		}
	</style>
</head>
<body>
	<div class="head"></div>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="bottom"></div>
</body>
</html>

案例2代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>网页布局2</title>
	<style type="text/css">
		/*将多个div块的共性单独抽出来然后列举，减少代码量*/
		.header,.footer{
			width:500px;
			height:100px;
			background:pink;
		}
		.main{
			width:500px;
			height:300px;
		}
		.left,.right{
			width:100px;
			height:300px;
		}
		.content-top,.content-bot{
			width:300px;
			height:150px;
		}
		/*开始修饰*/
		.left{
			background:#C9E143;
			float:left;
		}
		.content-top{
			background:#FF0000;
		}
		.content-bot{
			background:#FFA500;
		}
		.content{
			float:left;
		}
		.right{
			background:black;
			float:right;
		}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main">
		<div class="left"></div>
		<div class="content">
			<div class="content-top"></div>
			<div class="content-bot"></div>
		</div>
		<div class="right"></div>		
	</div>
	<div class="footer"></div>
</body>
</html>

neilro

关注

2
点赞
踩
57

收藏

觉得还不错? 一键收藏
1
评论
11.两种简单DIV+Css布局形式的实现案例

案例1：案例2：案例1代码：浮动布局 .head,.main,.bottom{ margin:0; padding: 0; } .head{ width:400px; height:100px; background:#000000; } .main{ margin:5px 0; wi
复制链接

扫一扫