Dreamweaver用CSS制作细框表格

Dreamweaver 21NN 1年前 (2018-05-24) 25次浏览 已收录 0个评论 扫描二维码

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

  新建CSS样式

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

  Dreamweaver用CSS制作细框表格

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

  Dreamweaver用CSS制作细框表格

  图2

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

  Dreamweaver用CSS制作细框表格

  图3

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

  至此在CSS面板中就能看到两个新建好的CSS样式了,以后你就可以任意调用了,如图4。

  Dreamweaver用CSS制作细框表格

  图4

  插入表格并应用样式

  今天我们需要调用的CSS样式已经全部定义好了,下面我们正式插入表格。点击菜单“插入”→“表格”,进行表格属性设置。其中行数、列数、表格宽度等值大家可以根据实际需要做灵活处理,下面三个值请一定按照要求设置:边框粗细:0;单元格边距:1;单元格间距:1,如图5。

  Dreamweaver用CSS制作细框表格

  图5

  表格插入后,鼠标选择整个表格,鼠标指向窗口底部状态栏中标签选择器,右键点击其中的标签“

”,在弹出菜单中选择“设置类”→“bk”(即我们新建的CSS样式“.bk”),如图6。

  Dreamweaver用CSS制作细框表格

  图6(点击看大图)

  就这样容易,一个细线框表格就建立好了,你可以按F12键预览最终效果,如图7。

  Dreamweaver用CSS制作细框表格

  图7

  由于我们采用的CSS定义效果,所以修改表格的线框颜色非常容易。“.bk”用于定义表格边框的颜色;“.bk td”用于定义表格内部的颜色,我们灵活设置就能变换出很多效果了


本文:Dreamweaver用CSS制作细框表格 本文链接:https://www.21nn.cn/biancheng/dreamweaver/2307.html 本站所以图片、文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如有侵权请邮件与我们联系处理。i@ki4.cn
喜欢 (0)
[1353713598@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址