9.7 综合实例
根据本章介绍的页面布局知识，结合前面章节介绍的超链接导航条以及CSS设置样式的方法，制作图9-27所示的页面效果。
图9-27 综合实例
首先，完成HTML的结构内容部分：
（1）新建页面，在＜title＞标签中输入“综合实例——去哪儿”作为页面标题。
（2）观察整个页面内容，根据语义选择使用哪个标签。页面最上方的页眉部分使用header和nav元素，页面最下方的页脚部分使用footer元素，左侧边栏是附属信息，使用aside元素，右侧边栏是独立的文章，使用article元素，内容中的小节可以使用section元素。
（3）为了方便设置整个页面内容的样式，使用id为wrapper的div元素将所有元素包围起来。
（4）为了方便设置左、右侧边栏的样式及布局，分别使用class为leftsider的div元素和class为content的div元素将左、右侧边栏目内容包围起来。
HTML部分代码如下：
新建样式表文件“common.css”，在HTML的＜head＞标签中链接外部样式表，代码如下：
在“common.css”中依次设置各部分样式：
（1）设置网页整体样式，将wrapper宽度设为980px，并将其设为水平居中，代码如下：
（2）设置使用列表制作的主导航的样式，如图9-28所示，代码如下：
图9-28 主导航条
（3）设置左侧边栏样式，左侧边栏依旧是由列表制作的导航条。为了实现多栏布局，这里使用float和clear属性，设置float为left，效果如图9-29所示，代码如下：
（4）右侧正文部分设置float为right，为正文部分的标题h1、h2以及段落p添加样式，如图9-30所示，代码如下：
图9-29 左侧边栏
图9-30 正文部分样式
（5）设置页脚样式，在页脚footer和左、右侧边栏之间添加一个class为clear的div，并设置clear为both，使左、右侧边栏的float属性不会影响footer，效果如图9-31所示，代码如下：
图9-31 页脚
