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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值