细边框表格,看起来似乎是一个非常简单的东西。直接插入表格后设置表格边框boder=1?做过尝试的朋友肯定..." />
 手机
当前位置:查字典教程网 >网页设计 >Dreamweaver教程 >dw中实现像素为1px的细边框表格实例
dw中实现像素为1px的细边框表格实例
摘要:最近我们都是使用表格来实现如下在网页中制作一个像素为1的wordlink_affiliate">细边框表格,看起来似乎是一个非常简单的东西。...

 最近我们都是使用表格来实现如下

在网页中制作一个像素为1的wordlink_affiliate">细边框表格,看起来似乎是一个非常简单的东西。直接插入表格后设置表格边框boder=1?做过尝试的朋友肯定知道通过设置边框为1像素得出来的表格边框线非常粗,并不是想要的那种细边框效果,那么这种细边框怎么做呢?这需要一定的技巧。

先来看看边框为1像素的表格效果:

dw中实现像素为1px的细边框表格实例1

从上面的效果来看,并不是我们想要的细边框效果,1个像素的边框有些太粗,如果边框颜色设置为纯黑效果会更明显,而大多数时候我们需要的是真正一个像素的边框效果。下面介绍一下这种方法:

1、新建一个实际需要大小的表格,设置表格边框为0,表格间距为1,填充为0,表格的背景颜色设置为想要的边框颜色,即:border=”0″ cellpadding=”0″ cellspacing=”1″ bgcolor=”#CCCCCC”,如图:

dw中实现像素为1px的细边框表格实例2

jquery1386566882734="47" />

2、选中单元格标签,将单元格背景颜色设置为纯白色#FFFFFF,保存预览即可得到下图的细边框效果,真正1像素边框,看起来效果和直接设置边框为1完全更清新。

dw中实现像素为1px的细边框表格实例3

当然个人不推荐使用表格了,我们使用css div会很简单易行

 代码如下  

<style>
.div{border:1px solid #ccc;}
</style>
<div class='div' ></div>

得到的效果是一样的,但是在代码上会更简洁维护起来div+css模式比table模式要简单方法多了。

【dw中实现像素为1px的细边框表格实例】相关文章:

在Dreamweaver中灵活使用网页表格

在Dreamwe中怎样为图片添加自定义颜色的边框?

Dreamweaver快速制作细边线表格技巧

Dreamweaver制作细边表格

Dreamweaver中怎么让html网页中的table边框细线显示?

Dreamweaver中精细化你的表格外观

设计1px边框表格的几种技巧

DW不用CSS样式为表格添加细线边框

Dreamweaver中实现双背景图片导航菜单的代码

Dreamweaver项目列表前面的项目符号去掉小圆点?

精品推荐
分类导航