首页 > 其他分享> > CSS——网页版心和布局流程

CSS——网页版心和布局流程

2021-06-10 19:51:53 作者：互联网

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程

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

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

最普通的，最为常用的结构

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.box {
		width: 900px;
		background-color: #eee;
		border: 1px dashed #ccc;
		margin: 0 auto;
	}
	.top {
		height: 80px;	
	}
	.banner {
		height: 120px;
		/*margin: 0 auto;*/
		margin: 5px auto;
	}
	.main {
		height: 500px;
	}
	.footer {
		height: 100px;
		/*margin: 0 auto;
		margin-top:5px;*/ 
		margin: 5px auto 0;
	}
	</style>
</head>
<body>
	<div class="top box">top</div>
	<div class="banner box">banner</div>
	<div class="main box"></div>
	<div class="footer box"></div>
</body>
</html>

两列左窄右宽型

在这里插入图片描述
比如小米小米官网

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.top {
		width: 900px;
		height: 80px;
		background-color: pink;
		margin: 0 auto;
	}
	.banner {
		width: 900px;
		height: 150px;
		background-color: purple;
		margin: 0 auto;
	}
	.main {
		width: 900px;
		height: 500px;
		background-color: skyblue;
		margin: 0 auto;
	}

	.left {
		width: 288px;
		height: 500px;
		background-color: yellow;
		float: left;
		border: 1px solid red;
	}
	.right {
		width: 600px;
		height: 500px;
		background-color: deeppink;
		float: right;
		
	}
	.footer {
		width: 900px;
		height: 120px;
		background-color: black;
		margin: 0 auto;
	}

	</style>
</head>
<body>
	<div class="top"></div>
	<div class="banner"></div>
	<div class="main">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer"></div>
</body>
</html>

通栏平均分布型

比如锤子锤子官网

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.top {
		
		height: 80px;
		background-color: pink;
		
	}
	.top-inner {
		width: 900px;
		height: 80px;
		/*background-color: #ababab;*/
		margin: 0 auto;
	}
	.banner {
		width: 900px;
		height: 150px;
		/*background-color: purple;*/
		margin: 0 auto;
	}
	.banner li {
		float: left;
		width: 217px;
		height: 150px;
		margin-right: 10px;
	}
	.one {
		background-color: purple;
	}
	.two {
		background-color: blue;
	}
	.three {
		background-color: pink;
	}
	.banner .four {
		background-color: green;
		margin-right: 0;
		float: right;
	}
	.main {
		width: 900px;
		height: 500px;
		background-color: skyblue;
		margin: 0 auto;
	}

	.left {
		width: 288px;
		height: 500px;
		background-color: yellow;
		float: left;
		border: 1px solid red;
	}
	.right {
		width: 600px;
		height: 500px;
		background-color: deeppink;
		float: right;
		
	}
	.footer {
		width: 900px;
		height: 120px;
		background-color: black;
		margin: 0 auto;
	}

	</style>
</head>
<body>
	<div class="top">
		<div class="top-inner">123</div>
	</div>
	<div class="banner">
		
		<ul>
			<li class="one">1</li>
			<li class="two">2</li>
			<li class="three">3</li>
			<li class="four">4</li>
		</ul>
	</div>
	<div class="main">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer"></div>
</body>
</html>

标签：网页,color,auto,height,width,background,版心,margin,CSS
来源： https://blog.51cto.com/u_15265965/2892368