在上一章我们了解到不同类型的网站，页面布局差异极大。但不同的网页的功能结构之间还是包含了许多共同之处。每一个网页都是由许多功能模块所组成。通过了解页面布局组成，练习这些组成结构的实现，能够帮助我们积累经验，加快网页开发的速度。
在本章中我们将实现一个新闻门户的首页。
该网页垂直从上往下可以划分为7个部分：
-
标题区（Logo区）
-
导航菜单区
-
内容区
-
站点地图区
-
行业链接区
-
页脚区
-
版权区
其中内容区还可以继续划分成几部分：
-
多图轮播
-
新闻列表
-
搜索
-
产品链接
有许多种方式着手开发一个页面，这也就导致同样的页面效果，具体的代码实现会因人而异。大体来说，我们可以采用结构化设计方法中的“自顶向下，逐步求精”的方式构建整个页面。
-
将页面内容用HTML组织好结构
-
为页面元素添加CSS样式，实现设计效果
对于复杂的页面结构来说，我们可以将整个页面划分成不同的组成部分，然后再逐步实现它们的HTML结构和CSS样式。
接下来我们就按照从上到下的顺序依次实现各部分。目前绝大部分现代PC浏览器和移动浏览器都对HTML 5、CSS 3提供了良好的支持，在后面的教程中，我们默认使用HTML 5标准实现页面功能。
1. 标题区（Logo区）
在大部分站点中，为了突出网站自身品牌，设计师一般都会在最上面放置网站的Logo图片和标题。网易首页的标题部分是由左侧的Logo图片、右侧的有害信息举报Gif图片以及下方的下划线组成。它们的HTML结构如下：
<header>
<img src="assets/image/logo.png" alt="网易Logo">
<img src="assets/image/harm.jpg" alt="有害信息举报">
</header>
页面显示效果如下：
在没有添加任何样式的情况下，浏览器按HTML标签的默认属性将图片显示出来了。这个效果显然与我们的目标有一定差距。
-
Logo区域宽度为960像素，并水平居中
-
“有害信息举报”图片没有靠右
-
没有红色分隔线
下面让我们一步步通过CSS样式添加必要的效果。
header { width: 960px; /*设置Logo区域宽度为960像素*/ margin: 0 auto; /*设置Logo区域上下外边距为0，左右外边距为自动设置*/ }
设置了Logo区的宽度，并通过将margin属性的左右两侧边距设为自动（auto）使该区域水平居中。
“有害信息举报”图需要浮动到右侧。利用伪类选择器选择有害信息举报图，并将它浮动到最右侧：
img:last-child {
float: right;
}
接下来添加Logo区下方的红色分割线：
header {
width: 960px;
margin: 0 auto;
border-bottom: 2px #ff3333 solid;
}
再加上Logo图片上下方设计的留白，使得界面显得不那么拥挤。
header {
width: 960px;
height: 51px;
padding-top: 35px;
margin: 0 auto;
border-bottom: 2px #ff3333 solid;
}
img:last-child {
float: right;
}
效果如下：
我们到这里就已经完整实现了标题区域。完整的页面代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易新闻</title>
<style>
header {
width: 960px;
height: 51px;
padding-top: 35px;
margin: 0 auto;
border-bottom: 2px #ff3333 solid;
}
img:last-child {
float: right;
}
</style>
</head>
<body>
<header>
<img src="assets/image/logo.png" alt="网易Logo">
<img src="assets/image/harm.jpg" alt="有害信息举报">
</header>
</body>
</html>
