HTML5+CSS3:构建简易的web页面

记录一下一个比较常见而且简易的web页面的制作，最终效果图如下：
在这里插入图片描述

制作头部标题：

在body部分加入如下HTML5代码：

	<div class="header">
  		<h1>头部区域</h1>
	</div>

在CSS部分加入如下代码，修饰头部区域：

.header{
		text-align: center;/*文字位于中央*/
		background-color: gray;/*背景色为灰色*/
		padding-bottom: 20px;/*顶部填充20px*/
		padding-top: 20px;/*底部填充20px*/
	}

效果如下图所示：
在这里插入图片描述

制作头部水平导航栏

在body部分加入如下HTML5代码：


	<div class="topnav">
	   <a href="#">链接</a>
	   <a href="#">链接</a>
	   <a href="#">链接</a>
	   <a href="#">链接</a>
	</div>

在CSS部分加入如下代码，修饰头部水平导航栏区域：

	.topnav{/*导航栏整体*/
		list-style-type: none;/*如果导航栏是用列表的话要加这句去掉列表的装饰元素，写了不亏*/
		background-color:black;/*背景色为黑色*/
		overflow: hidden;/*如果有溢出的部分就隐藏*/
	}
	.topnav a{/*导航栏的栏目块*/
		float: left;/*栏目块浮动型向左靠齐*/
		display: block;/*导航栏目*/
		color: white;/*字体颜色为白色*/
		text-align: center;/*文字处在栏目块中央*/
		padding: 10px 15px;/*栏目块之间加填充扩大面积*/
		text-decoration: none;/*去掉超链接文本的下划线设置*/
	}

在这里插入图片描述好，把头部整体做完之后，我们就要去做中央的部分和底部部分了。在进行这一步前，我们需要注意一些小的细节：
1.中央的文本区域是三个并列的，为了美观规范，我们希望用占屏幕百分比宽度的方式来设定它们的宽度。但是设定宽度的时候还会受padding和broder所占空间的影响。为了避免这个情况，在CSS代码段中加入如下代码：

	* {
  	box-sizing: border-box;/*对元素高度与宽度包括了padding和broder*/
	}

2.当中央文本区域构建完毕后，我们希望底部部分能够独占页面底部，而不是跟中央文本区域“混”在一起。因此需要做一个额外的操作，这个后面会加。

制作中央文本栏

在body内填入以下HTML5代码：

  <div class="row">
	  <div class="column side">
		 <h2>左侧边栏</h2>
		 <p>左侧内容</p>
	  </div>
  
	  <div class="column middle">
		 <h2>主区域内容</h2>
		 <p>主区域内容</p>
		 <p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2019年8月，百度百科已经收录了超1600万词条，参与词条编辑的网友超过680万人，几乎涵盖了所有已知的知识领域.
         “世界很复杂，百度更懂你”，百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</p>
	  </div>

	  <div class="column side">
		 <h2>右侧边栏</h2>
		 <p>右侧内容</p>
	  </div>
		
	</div>

在CSS填入以下代码：

	.column.side{
		width: 25%;/*侧边栏宽度占比25%*/
	}
	.column.middle{
		width: 50%;/*主栏占比50%*/
	}
	.column{
		float: left;/*浮动靠左排列*/
		padding: 20px 10px 50px;/*适当做填充*/
	}

示意图如下所示：
在这里插入图片描述

制作底部栏

我们假设忽视上面的问题2，试着直接把底部文本加入：

	<div class="footer">
  		<p>底部区域</p>
	</div>

悲剧了，底部文本和中央文本混在一起了：
在这里插入图片描述遇到这种情况，这时候就要在CSS代码段中加入段代码调整一下：

	.row:after {/*对三列文本栏的后面部分做处理*/
	   content: "";/*后面增加空格*/
	   display: table;/*前后有换行符*/
	   clear: both;/*消除两边的浮动*/
	}

在这里插入图片描述 OK，如上图所示，问题已经解决了。通过对三列文本栏后方增加换行与空格，使得底部区域成功到了中央文本区的下端。
随后在CSS代码段加上如下代码修饰底部区域。

	.footer {
	   background-color: #f1f1f1;/*背景颜色设为浅灰色*/
	   padding: 10px;/*适当增加填充区域*/
	   text-align: center;/*文字排列在中央*/
	}

在这里插入图片描述完工了，全部代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web_csdn</title>
<style type="text/css">
	* {
  	box-sizing: border-box;/*对元素高度与宽度包括了padding和broder*/
	}
	.header{
		text-align: center;
		background-color: gray;
		padding-bottom: 20px;
		padding-top: 20px;
	}
	.topnav{
		list-style-type: none;
		background-color:black;
		overflow: hidden;
	}
	.topnav a{
		float: left;
		display: block;
		color: white;
		text-align: center;
		padding: 10px 15px;
		text-decoration: none;
	}
	.column.side{
		width: 25%;
	}
	.column.middle{
		width: 50%;
	}
	.column{
		float: left;
		padding: 20px 10px 50px;
	}
	.row:after {
	   content: "";/*后面增加空格*/
	   display: table;/*前后有换行符*/
	   clear: both;/*消除两边的浮动*/
	}
	.footer {
	   background-color: #f1f1f1;
	   padding: 10px;
	   text-align: center;
	}
</style>
</head>

<body>
	<div class="header">
  		<h1>头部区域</h1>
	</div>
	
	<div class="topnav">
	   <a href="#">链接</a>
	   <a href="#">链接</a>
	   <a href="#">链接</a>
	   <a href="#">链接</a>
	</div>
	
	<div class="row">
	  <div class="column side">
		 <h2>左侧边栏</h2>
		 <p>左侧内容</p>
	  </div>
  
	  <div class="column middle">
		 <h2>主区域内容</h2>
		 <p>主区域内容</p>
		 <p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2019年8月，百度百科已经收录了超1600万词条，参与词条编辑的网友超过680万人，几乎涵盖了所有已知的知识领域.
         “世界很复杂，百度更懂你”，百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。</p>
	  </div>

	  <div class="column side">
		 <h2>右侧边栏</h2>
		 <p>右侧内容</p>
	  </div>
		
	</div>
	
	<div class="footer">
  		<p>底部区域</p>
	</div>
</body>
</html>

师范大学生

发布了54 篇原创文章 · 获赞 18 · 访问量 9568

私信关注