网页页面布局

最新推荐文章于 2022-06-21 11:42:20 发布

weixin_43312083

最新推荐文章于 2022-06-21 11:42:20 发布

阅读量405

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43312083/article/details/98885141

版权

前端专栏收录该内容

85 篇文章 5 订阅

订阅专栏

版心和布局流程

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

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

布局流程

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

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

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

3、制作HTML结构。

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

一列固定宽度且居中

一列固定宽度且居中的盒子

快捷键：.top+.banner+.main+.footer 再enter键

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style> /*并集选择器集体声明*/
	.top,
        .banner,
        .main,
        .footer {
		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">top</div>
	<div class="banner">banner</div>
	<div class="main"></div>
	<div class="footer"></div>
</body>
</html>

两列左窄右宽型:(比如小米官网)

快捷键：.top+.banner+（.main>.left+.right）+.footer 再enter键

<!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;   /*brder=1 加 margin=10，  300px-2-10 = 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>

通栏平均分布型（比如锤子官网）

快捷键列表：

ul>li*4

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.top {
		height: 80px;
		background-color: pink;
		margin: 0 auto;
	}
	.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;
		list-style: none;/*去掉li前面的小原点*/
	}
	.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>

综合例子：分为两个部分html文件和ccs文件，工程目录如下图：

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云道页面</title>
	<!-- 引入外面的css文件 -->
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 顶部导航栏开始了 -->
	<div class="header">
		<div class="inner">
			<div class="logo"> <!-- 放logo 左浮动 -->
				<a href="#"><img src="images/logo.png" /></a>	
			</div>
			<div class="nav"> <!-- 导航栏  右浮动 -->
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">云道商城</a></li>
					<li><a href="#">智慧门店</a></li>
					<li><a href="#">营销平台</a></li>
					<li><a href="#">媒体联盟</a></li>
					<li><a href="#">关于云道</a></li>
				</ul>
			</div>
		</div>
	</div>
<!-- 顶部导航栏结束了 -->

	<!-- banner start -->
	<div class="banner">
		
	</div>
	<!-- banner end -->

	<!-- 我们服务的模块 -->
	<div class="service">
		<div class="service-head">
			<h3>
				<img src="images/ser.png">
			</h3>
			<p>shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系...
我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！</p>
		</div>
			
	</div>
</body>
</html>

index.css

/* 先删除默认的内外边距 */
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #fafafa;
	height: 3000px;
}
li{
	list-style: none;
}


/*顶部导航栏开始了*/
.header {
	height: 100px;
	background-color: #fff;
}
.inner {
	width: 1200px;
	height: 100px;
	/*background-color: pink;*/
	margin: 0 auto;
	line-height: 100px;
}
.logo {
	float: left;
}
.nav {
	float: right;
}
.nav li {
	float: left;
	margin: 0 20px;
}
.nav li a {
	color: #333;
	text-decoration: none;
}
.nav li a:hover {
	color: #2288f6;
}

 /*banner start*/
.banner{
	height: 620px;
	background: url(../images/banner.jpg) no-repeat top center;
}
  /*banner end */

.service{
	/*margin-top: 75px;*/
	width: 1055px;
	height: 660px;
/*	background-color: pink;*/
	margin: 75px auto 0;
  }
  .service-head {
  	border-top: 1px solid #ccc;
  	margin: 0 25px;
  }
  .service-head h3{
  	width: 167px;
  	height: 46px;
  	margin: -15px auto 0; 

  }

  .service-head p{
  	font-size: 12px;
  	color: #666;
  	line-height: 26px;
  	text-align: center;
  	width: 831px;
  	margin: 15px auto 0;
  }

特别注意在中间插入大图时，我们选择在ccs文件中用背景图片进行设置，

background: url(../images/banner.jpg) no-repeat top center;

效果图

weixin_43312083

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
网页页面布局

版心和布局流程阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。布局流程为了提高网页制作的效率，布局时通常需要遵守一定的布局流程...
复制链接

扫一扫

专栏目录