当前位置：首页 > news >正文

CSS学习11--版心和布局流程以及几种分布的例子

news 来源：原创 2025/4/28 22:00:35

版心和布局流程

一、版心
二、布局流程
三、一列固定宽度且居中
四、两列左窄右宽
五、通栏平均分布型

一、版心

版心：是指网页主题内容所在的区域。一般在浏览器窗口水平居中位置，常见的宽度值为960px、980px、1000px、1200px等。

二、布局流程

为了提高网页制作的效率，布局时需要遵守一定的布局流程，具体如下：

确定页面版心
分析页面中的行模块，以及每个行模块中的列模块
制作HTML结构
CSS初始化，然后开始运用盒子模型的原理，通过CID+CSS布局来控制网页的各个模块

三、一列固定宽度且居中

<html>
	<head>
		<style>
		* {
			padding: 0;
			margin: 0;
		}
		.top,
		.banner,
		.main,
		.footer {
			width: 960px;
			margin: 10px auto;
			text-align: center;
		}
		.top {
			height: 100px;
			background-color: pink;
		}
		.banner {
			height: 120px;
			background-color: skyblue;
		}
		.main {
			height: 500px;
			background-color: red;
		}
		.footer {
			height: 150px;
			background-color: #ccc;
		}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">main</div>
		<div class="footer">footer</div>
	</body>
</html>

四、两列左窄右宽

<html>
	<head>
		<style>
		* {
			padding: 0;
			margin: 0;
		}
		.top,
		.banner,
		.main,
		.footer {
			width: 960px;
			margin: 10px auto;
			text-align: center;
		}
		.top {
			height: 100px;
			background-color: pink;
		}
		.banner {
			height: 120px;
			background-color: skyblue;
		}
		.main {
			height: 500px;
			background-color: red;
		}
		.footer {
			height: 150px;
			background-color: #ccc;
		}
		.main .left {
			width: 360px;
			height: 500px;
			float: left;
			background-color: white;
		}
		.main .right {
			width: 590px;
			height: 500px;
			margin-left: 10px;
			float: left;
			background-color: white;
		}
		</style>
	</head>
	<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>
</html>

五、通栏平均分布型

<html>
	<head>
		<style>
		* {
			padding: 0;
			margin: 0;
		}
		ul {
			list-style: none;
		}
		.top,
		.banner,
		.main,
		.footer {
			width: 960px;
			margin: 10px auto;
			text-align: center;
		}
		.top {
			height: 100px;
			background-color: pink;
		}
		.banner {
			height: 120px;
			background-color: skyblue;
		}
		.main {
			height: 500px;
			background-color: red;
		}
		.footer {
			height: 150px;
			background-color: #ccc;
		}
		.main ul li:nth-child(odd) {
			width: 240px;
			height: 240px;
			background-color: deeppink;
			float: left;
		}
		.main ul li:nth-child(even) {
			width: 240px;
			height: 240px;
			background-color: hotpink;
			float: left;
		}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<div class="footer">footer</div>
	</body>
</html>