文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计DreamWeaver → CSS制作细框表格-Dreamweaver教程

CSS制作细框表格-Dreamweaver教程

时间:2008/10/31 0:57:00来源:本站整理作者:佚名我要评论(2)

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

   新建CSS样式

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

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


    现在名为“.bk”的CSS就建立好了,接下来我们为它添加一个子选择器。继续在CSS面板中点击“新建CSS规则”按钮,基本设置如图2,不过选择器名称定义为“.bk td”(表示这是一个依附于.bk的子样式)。依然进入“CSS规则定义”对话框,继续设置背景颜色,本例值为“#FFFFFF”,即白色,点击“确定”按钮完成。    下面正式进入“CSS规则定义”对话框,点击选择分类中的“背景”,设置“背景颜色”为所需,本例值为“#000000”,即黑色(利用软件提供的颜色选择器,具体颜色代码并不需要手工输入)。这也是我们最终看到的表格边框颜色,点击“确定”按钮完成设置,如图3。

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


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

    表格插入后,鼠标选择整个表格,鼠标指向窗口底部状态栏中标签选择器,右键点击其中的标签&ldquo;<table>&rdquo;,在弹出菜单中选择&ldquo;设置类&rdquo;&rarr;&ldquo;bk&rdquo;(即我们新建的CSS样式&ldquo;.bk&rdquo;),如图6。
 

相关视频

    没有数据

相关阅读 dnf普雷首饰怎么制作 dnf普雷首饰制作攻略dnf普雷攻略机制详解 dnf普雷攻略机制BOSS打法全介绍lol亚索战场boss皮肤多少钱 lol亚索战场boss皮肤特效视频一览lol奇亚娜战场BOSS皮肤特效一览 lol奇亚娜战场BOSS皮肤特效视频浮岛物语塑料怎么获得 浮岛物语塑料制作方法dnf代号希望隐藏Boss掉落什么 dnf代号希望隐藏Boss掉落奖励介绍武士零隐藏BOSS在哪 武士零隐藏BOSS位置触发条件物质世界怎么制作东西 物质世界物品制作方法

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 CSS优雅的公布栏源码高级CSS选择器的使用 将网站(主页)变成黑白DW设计网页时组织CSS的建议利用Dreamweaver合理优化网页元素布局22个Dreamweaver内置网页过渡特效简介

人气排行 如何用Dreamweaver制作电子相册下拉菜单全攻略-用Dreamweaver制作下拉菜单用Dreamweaver实现ASP数据库动态网站建设用Dreamweaver CS3制作下拉菜单如何在DW中插入Flash的参数详解Dreamweaver标签选择器的妙用巧用dreamweaver模板批量制作网页优化HTML代码加快网页速度