在网页中实现细线边框的两种方法

转载 2006年06月19日 11:24:00
  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。
  
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。

   如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定义表格的背景颜色,用Cellspacing可以控制表格单元的额外空间,如果定义两个表格,把其中一个的表格背景设为全黑,然后在这个表格中嵌套定义另外一个表格,背景设为全白,并且把Weight=100%。这时,两个表格是重叠的,但是,如果把背景为黑色的那个表格再定义一个Cellspacing=1。那么就是说,黑色的表格比白色的表格多出了一个像素的外围空间,而白色的表格又在黑色表格之上,从而达到细边框的效果。源代码如下:

  〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉

   〈tr〉

   〈td〉

   〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉

   〈tr〉

   〈td〉

   〈/td〉

   〈/tr〉

   〈/table〉

   〈/td〉

   〈/tr〉

   〈/table〉

  第二种比较简单,那就是用CSS(层叠样式表)强制定义,但是,有些比较老的浏览器不支持CSS,可能导致无法显示你所要求的效果。不过使用CSS定义,语句非常简洁,所作网页的容量也较小。它的操作方法是,在表格的最外围的相应最小单元的〈td〉标签中定义style="BORDER-postion: black 1px solid;",其中,Postion的参数有Left、Right、Top和Bottom,分别表示在单元的左、右、上、下显示一条1个像素宽的实线条。

  源代码如下:

  〈table border="0" bgcolor=white〉

   〈tr〉

   〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉

   〈/td〉

   〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉

   〈/td〉

   〈/tr〉

   〈tr〉

   〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉

   〈/td〉

   〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉


   〈/td〉

   〈/tr〉

  〈/table〉

实现多线程有两种方法: Thread类继承和Runnable接口实现

l 创建线程的第一种方式:继承Thread类。 步骤: 1,定义类继承Thread。 2,复写Thread类中的run方法。 目的:将自定义代码存储在run方法。让线程运行。/...
  • u013380777
  • u013380777
  • 2016年07月04日 11:41
  • 4739

设置表格1px边框线的两种方式

方式一       使用 CSS属性 border-collapse 方式二
  • wuqinfei_cs
  • wuqinfei_cs
  • 2014年08月20日 17:37
  • 1366

有两种实现多线程的方式以及两种方式之间的区别

Java中有两种实现多线程的方式。一是直接继承Thread类,二是实现Runnable接口。那么这两种实现多线程的方式在应用上有什么区别呢?          为了回答这个问题,我们可以通过编写...
  • u013449800
  • u013449800
  • 2014年08月22日 18:40
  • 3920

js、jq两种方法实现网页侧边导航

js第一种方法:实现的效果如下: 1.在侧栏滑动时背景颜色切换和字体颜色切换. 2.窗口滚动时,右边侧栏随之变化. 3.点击侧栏选项,跳动到当前选项对应的页面,并且侧栏也随之变化.代码如下: ...
  • mr_fzz
  • mr_fzz
  • 2016年11月23日 17:52
  • 1230

网页设计:如何设计细线条的表格

l         如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000"),表格线其实是2px的,要做细线表格,有三种方法:   1.在...
  • lsy649241354
  • lsy649241354
  • 2013年06月23日 11:27
  • 713

HTML5实现细线课程表

纯H5实现的细线课程表详细代码如下:
  • u014140915
  • u014140915
  • 2017年03月30日 23:13
  • 598

HTML5 Canvas中实现绘制一个像素宽的细线

演示HTML5 Canvas中如何正确的画出一个像素宽的直线。
  • jia20003
  • jia20003
  • 2013年07月25日 23:10
  • 16272

table 表格细线条实现方式

第一种方式: 推荐使用这种,兼容性好 .define-table{ border-collapse:collapse; border-spacing:0; ...
  • NFA_YY
  • NFA_YY
  • 2017年07月13日 18:23
  • 566

用js语句实现网页中的选项卡(两种方法)

用js语句实现网页中的选项卡方法一:以下是全部的代码; 选项卡 *{margin: 0;padding: 0;}...
  • domunweb
  • domunweb
  • 2017年06月15日 19:47
  • 180

iOS 两种方法实现左右滑动出现侧边菜单栏 slide view

现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有。 网上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方法实现sli...
  • Crayon_DyS
  • Crayon_DyS
  • 2013年06月08日 17:10
  • 22068
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在网页中实现细线边框的两种方法
举报原因:
原因补充:

(最多只允许输入30个字)