留言板各页设计 - 编程吧

上一篇 | 下一篇

留言板各页设计

发布: 2006-10-24 20:50 | 作者: 佚名 | 来源: 不详 | 查看: 39次

②用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)的前台部分全部完成




TAG: 编程

字号: | 推荐给好友

 

评分:0

我来说两句

seccode