留言板各页设计

②用CSS美化页面

保存任何修改，在IE中输入http://localhost/guestbook/index.asp(或http://localhost/guestbook/)看看您的成果：

是不是觉得很难看？没关系，现在我们用CSS和图片简单修饰一下。

按"Shift F11"展开CSS面板，点击图30中的加号按钮

在弹出的"New CSS Style"对话框中作如图31配置后单击"OK"，出现一个让您选择可在CSS文档的对话框，这里我们就保存为css.css(图32)

之后在弹出的"CSS Style Definition for body in css.css"对话框中作如下两步配置：

保存css.css，能够明显的看到现在的index.asp好看多了，但是我们的美化页面工作还没完成，继续定义链接的CSS----单击图30中的加号按钮，在弹出的"New CSS Style"对话框中作如图35配置，单击"OK"按钮，再配置(图35)

刚才定义的是正常状态和点击之后的链接，现在再定义一下鼠标移上时的链接状态：

保存css.css，刷新浏览器中index.asp页，看看效果----好象还少点东西，表格线不是网上常见的那种细线，对不对？好，我们现在就开始打造细线表格。用DW打开css.css，在最后加上代码：

.thin {
border-collapse: collapse;
}
现在css.css里的文档代码如下：

然后给需要做细线的表格(表格一、表格二、表格四和表格五)的table标签里加上class="thin"，给表格二、表格四和表格五的table标签里加上frame="void"，完成后代码大概如图40，在IE中看的效果如图41所示：

注意，这种方法制作的细线表格，必须确保有class="thin"、border="1"和bordercolor="#666666"(边框颜色，能够选择自己喜欢的颜色)三个属性，并且只适用 于IE5.0 。
最后是给几个单元格加上背景图片和背景颜色，完成后在IE中的效果如图所示：

至此，显示留言页(index.asp)的前台部分全部完成