最终效果图：

首先分析一下网页，了解到整体排版情况，这是网页中比较重要的，因为排好版式内容就可以随意的替换，方便网页的更新等等。

版式分析图：

搭好版式后，其他内容就好处理了，不过在做时，容易出现div位置不同情况，所以还是需要注意的。

然后通过外部样式表来建立css，为每一个模块添加内容与版式，像是导航栏就用到了定义列表。

因为大部分css给出了样式，所以排版过程中还是比较顺利的，就是填充文字、图片时，最好是从上往下，从里往外，因为最外面两边的背景一开始添加，可能效果不太明显，容易误判断为自己搞错了，其实只是版式层叠造成的，所以当一面不太顺利时，可以换个方向再继续。还有就是css的多种类型了，所以在不出效果时，多调整下，注意细节就好了。最主要的是调用css是用的<link href="css/style.css" rel="stylesheet" type="text/css"/>，不要少了项目。

第二页效果图：

通过选择内容进入详细页面