国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > Dreamweaver教程:CSS制作细框表格

Dreamweaver教程:CSS制作细框表格

来源:程序员人生   发布时间:2013-12-27 17:58:48 阅读次数:3449次

细线框表格是我们在网页制作中经常需要用到的效果之一,制作细线框表格的方法很多,代码兼容性最高的还是单元格背景填充法,不过常规写法产生的垃圾代码较多,今天我们转换思路用CSS来实现该效果。整个过程完全在Dreamweaver可视化界面下完成,不需要大家手工写任何代码,非常简单。

    新建CSS样式

    运行Dreamweaver,点击菜单“窗口”→“CSS样式”调用CSS面板。在面板中点击“新建CSS规则”按钮,如图1。

图1

    进入“新建CSS规则”对话框,将“选择器类型”设置为:高级;键入“选择器”名称:.bk(名称由大家任意确定,但该样式以后会反复调用,不可搞错);“定义在”设置为“仅对该文档”,点击“确定”按钮完成,如图2。

图2
    下面正式进入“CSS规则定义”对话框,点击选择分类中的“背景”,设置“背景颜色”为所需,本例值为“#000000”,即黑色(利用软件提供的颜色选择器,具体颜色代码并不需要手工输入)。这也是我们最终看到的表格边框颜色,点击“确定”按钮完成设置,如图3。

图3

    现在名为“.bk”的CSS就建立好了,接下来我们为它添加一个子选择器。继续在CSS面板中点击“新建CSS规则”按钮,基本设置如图2,不过选择器名称定义为“.bk td”(表示这是一个依附于.bk的子样式)。依然进入“CSS规则定义”对话框,继续设置背景颜色,本例值为“#FFFFFF”,即白色,点击“确定”按钮完成。

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生