您现在的位置: 365建站网 > 365学习 > 2.4 使用CSS美化留言板

2.4 使用CSS美化留言板

文章来源:365jz.com     点击数:1161    更新时间:2009-09-13 10:21   参与评论
我们的工作基本接近尾声,你也可以休息一会儿了。但是反复端详眼前的第一个Demo示例,总感觉很苍白、简陋。能不能把它打扮得更漂亮、更酷些。设计无限好,请找样式表。随口来句打油诗,此时CSS该粉墨登场了。

在新建文件时,我们借用了Dreamweaver CS3提供的现成的CSS模板框架,可能你没有发现吧,其实CSS早已帮助你撑起了这个页面的基本布局(不信你看看源代码)。下面的工作就是锦上添花,希望能够在Dreamweaver CS3提供的默认布局基础上简单的修修补补,使这个留言板更酷点(效果如图2­-17所示)。当然这个设计效果是作者本人的审美选择,你可能不喜欢,甚至很反感。这些都不重要,重要的是如何学会使用CSS修改眼前留言板显示效果的方法。

图 2-17

在这里,我重点在色彩上进行了大修,基本上以深黑色调来重新粉饰了整个留言板。主要操作要点如下:

复制index.HTML为index1.html,做个备份这样你还有反悔重做的机会。然后打开index1.html进行如下操作:

在Dreamweaver CS3中选择【窗口】|【CSS样式】菜单命令,打开【CSS样式】面板(如图2-18所示)。这是一个专门编辑和管理CSS的面板,功能非常强大,让人肃然起敬,我们将在第5章中详细讲解这个面板的使用奥秘。

修改颜色。我们的核心工作主要是借助CSS调整各部分的颜色,实际上一个网页的色彩搭配是否恰当至关重要,它决定了一个页面的审美和情趣。

在【CSS样式】面板中(【全部】视图下),选中“<body>”选项,然后在面板底部单击【编辑样式】按钮(),打开【CSS规则定义】对话框(如图2-18所示)。然后修改网页的背景色为黑色,字体大小为12像素,行高为1.6倍字体大小,设置字体颜色为白色(我们将在第5章中更详细的讲解该对话框的使用)。

图 2-18

下面分别选中左右两侧栏目,设置左栏背景色为#162328(.twoColFixRt # mainContent),右侧背景色为#2E393E(.twoColFixRt # sidebar1)。操作方法与上图类似:先在编辑窗口中选中要修改样式的标签(可以结合标签选择器),然后就可以在【CSS样式】面板中增加、删除和修改样式的规则了。

然后设置标题颜色为#E46232(土红色),留言标题颜色为#FEE58B(dt标签选择符),正文字体为白色。右侧栏目的字体颜色#CECECE(灰白色)。

网页对象的背景色和前景色搭配很有艺术性,具体如何更艺术,还有待于读者自己去把握。下面再来设置表单的样式。你可以在【CSS样式】面板中设置,或者直接在文档内的<style type="text/css">标签内添加如下代码:

input {/* 定义文本框的样式 */

           border: 1px solid #999999; /* 定义文本框的边框为浅灰色、1像素宽 */

           background-color: #2E393E; /* 定义文本框背景色为深黑色 */

           color: #CCCCCC; /* 定义文本框内的字体颜色为浅白色 */

}

textarea {/* 定义文本区域的样式 */

           background-color: #2E393E; /* 定义文本区域背景色为深黑色 */

           border: 1px solid #999999; /* 定义文本区域的边框为浅灰色、1像素宽 */

           color: #CCCCCC; /* 定义文本区域内的字体颜色为浅白色 */

}

如果在【CSS样式】面板中设置,可以直接单击【CSS样式】面板底部的【增加样式】按钮(),在打开的【CSS规则定义】对话框进行可视化设置,当然如果你简单了解了CSS基本语言,直接在样式表中输入代码会更简便、更快速,因为Dreamweaver CS3具体强大的代码智能提示功能,你不需要去记忆每个属性及其设置单位。

最后再为左侧栏目中的留言内容所包含的元素dd定义缩进样式,代码如下:

dd {/* 定义“定义列表项”的样式 */

           padding: 0px; /* 清除列表项的边缘空白 */

           margin-left: 2em; /* 定义左侧缩进2个字距 */

           text-indent: 2em; /* 定义首行缩进2个字距 */

}

你还可以为标题增加一条修饰线,具体代码如下(选中这些标题元素,然后在【CSS样式】面板编辑也行):

.twoColFixRt #container #sidebar1 h3 {/* 定义标题的样式 */

           padding-bottom: 6px; /* 给标题底部增加6像素的空白距离 */

           border-bottom-width: 1px; /* 给标题增加下划线,并定义线粗为1像素 */

           border-bottom-style: dashed; /* 给标题增加下划线,并定义虚线 */

           border-bottom-color: #666666; /* 给标题增加下划线,并设置为灰色显示 */

}

.twoColFixRt #container #mainContent h2 {{/* 定义标题的样式,说明同上 */

           border-bottom-width: 1px;

           border-bottom-style: solid;

           border-bottom-color: #E46232;

           padding-bottom: 12px;

}

当然,你还可以设计更多细节,使这个留言板显得更酷、更秀。这一切都有待于你自己去创意、去实践。限于篇幅,我也就不再唠唠叨叨了。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (1161人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------