DIV+CSS三种常见布局

最新推荐文章于 2024-05-06 20:22:13 发布

Elia_Chen

最新推荐文章于 2024-05-06 20:22:13 发布

阅读量8.5k

点赞数 26

文章标签： html html5 css css3

本文链接：https://blog.csdn.net/qq_42664066/article/details/108537836

版权

html 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

布局一：一列固定宽度且居中
效果图如下：
（图片有点小请见谅，因为要截全部）
在这里插入图片描述
主要代码如下：

<style>
	.top,.banner,.main,.footer{
		margin: 5px auto;
		background-color: silver;
		border: 2px dashed black;
		width: 70%；
		text-align: center;
	}
		.top,.footer{
			height: 200px;
			line-height: 200px;
		}
		.banner{
			height: 100px;
			line-height: 100px;
		}
		.main{
			height: 500px;
			line-height: 500px;
		}
</style>
<body>
	<div class="top">top</div>
	<div class="banner">banner</div>
	<div class="main"></div>
	<div class="footer">footer</div>
</body>

布局二：两列左窄右宽型（代表：小米官网）
效果图：
在这里插入图片描述
主要代码如下：

<style>
	.top,.banner,.main,.footer{
		margin: 5px auto;
		background-color: silver;
		border: 2px dashed black;
		width: 700px;/*70%*/
		text-align: center;
	}
		.top,.footer{
			height: 200px;
			line-height: 200px;
		}
		.banner{
			height: 100px;
			line-height: 100px;
		}
		.main,.left,.right{
			height: 500px;
			line-height: 500px;
		}
		.left{
			float: left;
			width: 200px;
			margin:-right:8px;
			border-right: 2px dashed black;
		}
		.right{
			width: 490px;
			float: left;
		}
	</style>
<body>
	<div class="top">top</div>
	<div class="banner">banner</div>
	<div class="main">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer">footer</div>
</body>

布局三：通栏平均分布（代表：锤子官网）
效果图：
在这里插入图片描述

主要代码如下：

<style>
	.all{
		width: 100%;
		border: 1px solid red;
	}
	.top,.banner,.main,.footer{
		margin: 5px auto;
		background-color: silver;
		border: 2px dashed black;
		width: 700px;/*70%*/
		text-align: center;
	}
		.top,.footer{
			height: 100px;
			line-height: 100px;
		}
		.banner{
			height: 50px;
			line-height: 50px;
		}
		.main{
			height: 300px;
			line-height: 300px;
		}
		.main-top{
			height: 100px;
			float: left;
		}
		.main-top div{
			float: left;
			width: 96px;
			height: 96px;
			margin: 1px;
			border: 1px solid black;
		}
		.main-bottom{
			height: 200px;
			float: left;
		}
		.main-bottom div{
			float: left;
			width: 96px;
			margin: 1px;
			height: 196px;
			border: 1px solid black;
		}
	</style>
<body>
	<div class="all">
		<div class="top">top</div>
	</div>
	<div class="banner">banner</div>
	<div class="main">
		<div class="main-top">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="main-bottom">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
	<div class="all">
		<div class="footer">footer</div>
	</div>
</body>

有建议和错误欢迎指出~
此至互勉！

Elia_Chen

关注

26
点赞
踩
158

收藏

觉得还不错? 一键收藏
3
评论
DIV+CSS三种常见布局

布局一：一列固定宽度且居中效果图如下：（图片有点小请见谅，因为要截全部）主要代码如下：<style> .top,.banner,.main,.footer{ margin: 5px auto; background-color: silver; border: 2px dashed black; width: 70%； text-align: center; } .top,.footer{ height: 200px; line-height:
复制链接

扫一扫