主要搞CSS样式

HTML骨架搭得差不多，就开始弄CSS。新建一个`*`文件，然后在`*`的``里用``标签把它引进来。

这步是关键，也是最花时间的。先给最外层的`#container`设置个宽度，让它在页面居中显示，一般用`margin: 0 auto;`就行。

然后是给各个大块div设置尺寸、背景色或者边框。我一开始喜欢给它们加上不同颜色的边框，这样能清楚地看到每个div占据的位置和大小，方便调试布局。比如`border: 1px solid red;`这种。

布局是重点。按照我的草图，`#main-content`和`#sidebar`是要并排显示的。这里我就用经典的float布局。让`#main-content`向左浮动（`float: left;`），`#sidebar`也向左浮动（或者向右`float: right;`也行，看设计）。这里有个坑，用浮动之后，常常会导致父容器高度塌陷，或者影响下面的元素。所以得在它们后面加个空的div，设置样式`clear: both;`来清除浮动。这个真是每次搞都得小心翼翼。

接着就是细化样式。给导航栏`#navigation`里的链接设置样式，去掉下划线，鼠标放上去变个颜色。给`#header`加个背景图或者好看点的背景色。调整字体大小、颜色、行间距，让内容看起来舒服。这些都是对着CSS属性一点点调出来的，比如`font-size`, `color`, `line-height`, `padding`, `margin`这些，反复在浏览器里刷新看效果。

我还特意注意下色彩搭配，找几个感觉比较和谐的颜色，不想搞得太花哨，也不能太单调。内容区的文字和背景色对比要明显，保证可读性。

完善内容和多页面

布局和样式搞得差不多，就把之前占位的文字换成真实内容。找几张合适的图片放进去。调整图片大小，可能还需要用到`float`让文字环绕图片。

作业要求通常不只一个页面。我就复制`*`，改名成`*`, `*`等，然后稍微修改下每个页面的主要内容区域。导航栏的链接也得对应修改确保页面之间可以正确跳转。

收尾检查

所有页面都弄好后，就是的检查阶段。在浏览器里（我主要用Chrome）打开每个页面，点点所有链接，看看有没有断链，布局有没有在某些地方错乱。特别是缩放浏览器窗口时，看看布局会不会崩掉（虽然这个基础作业没要求响应式，但习惯性看看）。

把之前调试用的边框都去掉，再整体看一遍效果。感觉差不多，一个用div和css做的静态网页作业就这么诞生。

整个过程下来，虽然中间调样式特别是布局的时候挺磨人的，有时候一个小细节能卡半天。但看到自己亲手把一个空白页面变成一个有模有样的网页，心里还是挺得劲的。这种从无到有的创造过程，就是我觉得写代码最有意思的地方之一。