web前端开发技术实验与实践（第三版）储久良编著 项目16

实训五 项目16

一、页面文字素材：

这是头部信息区。

这是导航信息区。

这是主题信息区。

这是右侧信息区。

这是版权信息区。

二、代码：

<!--prj_5_1.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DIV+CSS布局规划</title>
		<link href="../css/layout_1.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div id="container">
			<div id="header">这是头部信息区。</div>
			<div id="nav">这是导航信息区。</div>
			<div id="maincontent">
				<div id="main">这是主题信息区。</div>
				<div id="side">这是右侧信息区。</div>
			</div>
			<div class="clearfloat"></div>
			<div id="footer">这是版权信息区。</div>
		</div>
	</body>
</html>

三、页面效果截图：

 

更多推荐

web前端开发技术实验与实践（第三版）储久良编著 项目16 div+CSS页面布局设计