HTML实例-073 HTML的布局

hrs 提交于 2019/11/14 - 23:11 , 周四

使用 <div> 元素的 HTML 布局

注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局:

实例代码:

<!doctype html>
<head>
<meta charset="utf-8">
<style>
	#header{
	
	background-color:black;
	color:white;
	text-align:center;
	padding:5px;
	
	}
	
	#left{
	background-color:#eeeeee;
	color:green;
	width:130px;
	
	float:left;
	line-height:30px;
	}
	#content{
	width:350px;
    float:left;
    padding:10px;
	
	}
	
	#footer{
	background-color:black;
	color:white;
	text-align:center;
	clear:both;
	padding:1px;
	
	}
</style>

</head>
<html>
<body>
	<div id="header">
		<h2>这是网页头部分</h>
	</div>
	
	<div id="left">
		<ul>
			<li>首页</li>
			<li>drupal</li>
			<li>HTML</li>
			<li>关于</li>
		</ul>
	</div>
	<div id="content">
		这是网页内容显示部分。<br/>
		文章一<br/>
		文章二
	</div>
	
	<div id="footer">
		<h3>这是页脚部分</h3>
	</div>
</body>
</html>

运行效果:

html_073.png

从这个实例中看出,我们把网页分为四个div进行布局设置,分为是网页的头部、导航部分、内容部分和页脚部分。

标签

评论