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

2016-01-29 12:29 209 1 收藏

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

【 tulaoshi.com - Html 】

  很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细边框这个制作方法是必不可少的。这里,我将简单地谈一下细边框的制作方法。
  
  谈到细边框,本人认为大致有两种制作方法,第一种是用表格的嵌套,第二种是用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〉

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

来源:https://www.tulaoshi.com/n/20160129/1486323.html

延伸阅读
标签: word
Word2013中设置行距的两种方法   方法1:在行距列表中设置 打开Word2013文档窗口,选中需要设置行距的段落或全部文档。在开始功能区的段落分组中单击行和段落间距距按钮,并在打开TuLaoShi.com的行距列表中选中合适的行距,如图1所示。 图1 快速设置行距 方法2:在段落对话框中设置 用户还可以在段落对话框中...
标签: 电脑入门
为追求更完美效果,在Powerpoint中通过shockwave Flash Object控件插入SWF格式动画已是家常便饭。但很多情况下,演示文档还需要视频做辅助,下面我们介绍在PowerPoint 2007中插入视频的两种方法。 直接插入法 这是最简单方法。用该法插入的视频,在演示界面中仅显示视频画面,和插入图片十分类似。可以说,这是一种无缝插入,效果相当不错,...
标签: Web开发
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下: 第一步:在连接样式表的元素里定义一个id,例如 link href="1.css" rel="stylesheet" type="text/css" id="css" 我定义的id是css。 第二步:写一个js函数,代码如下: script type="text/javascript&q...
标签: 电脑入门
word在功能方面确实很强大,但在一些细节上也有不尽如人意的地方,例如想输入一个分数,其中可有一些学问啦.许多朋友在使用Word的时候,都会遇见这样一个问题,不知道Word分数怎么打,这也不奇怪,因为Word中分数确实非常难得弄出来,不知道微软设计Office的时候有没有替我们用户考虑下,毕竟分数是很多办公人员常用的单位。图老师小编甚至还打...
标签: 幼儿园 宝宝
宝宝上幼儿园“五要”原则 孩子刚刚入园,全家人都会有不同程度的担心:孩子在幼儿园会不会没吃饱,会不会想念家人,会不会受小朋友的欺负……于是接孩子回家后,就会出现许多新的话题。为了让孩子更好地适应幼儿园的集体生活,我们提出以下五要原则,供广大家长参考。五要分别是:要走路回家孩子刚刚入园,离开家人一整天,见到...

经验教程

295

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部