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

转载 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〉

相关文章推荐

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

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

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

l         如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000"),表格线其实是2px的,要做细线表格,...

HTML5实现细线课程表

纯H5实现的细线课程表详细代码如下: <cap

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

用js语句实现网页中的选项卡方法一:以下是全部的代码; 选项卡 *{margin: 0;padding: 0;}...

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

现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有。 网上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方法实现sli...

MFC添加网页的两种方法

  • 2017-07-28 23:48
  • 266KB
  • 下载

js两种实现网页图片滚动的方法 和一种切换的方法

第一种用js的window.onload() 先随便来几个图片 路径自己设一下 <img src="../img/2.jpg" wi

两种方法,给你的Safari浏览器添加必应/有道/谷歌网页即时翻译插件

原文链接:点击打开链接 先打开Safari,点击“显示-显示个人收藏栏”(或者直接按快捷键⇧⌘B),地址栏下出现“个人收藏栏”。 方法一:       1、按快捷键⌘D,先把任意一个网页添加到“个...

Javascript加入网页的两种方法:直接方式和引用方式

使用技巧  Javascript加入网页有两种方法:直接方式和引用方式。 1、直接方式  这是最常用的方法,大部分含有Javascript的网页都采用这种方法,如:        document.w...

细线表格的几种做法(css)

(一)效果一般 <!-- table {border-collapse:collapse;} td{ border-left:0; border-top:0; border-right:1px s...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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