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

2016-01-29 12:29 215 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〉

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

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

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

延伸阅读
标签: 电脑入门
为追求更完美效果,在Powerpoint中通过shockwave Flash Object控件插入SWF格式动画已是家常便饭。但很多情况下,演示文档还需要视频做辅助,下面我们介绍在PowerPoint 2007中插入视频的两种方法。 直接插入法 这是最简单方法。用该法插入的视频,在演示界面中仅显示视频画面,和插入图片十分类似。可以说,这是一种无缝插入,效果相当不错,...
java语言已经内置了多线程支持,所有实现Runnable接口的类都可被启动一个新线程,新线程会执行该实例的run()方法,当run()方法执行完毕后,线程就结束了。一旦一个线程执行完毕,这个实例就不能再重新启动,只能重新生成一个新实例,再启动一个新线程。 Thread类是实现了Runnable接口的一个实例,它代表一个线程的实例,并且,启动线程的唯...
标签: Web开发
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下: 第一步:在连接样式表的元素里定义一个id,例如 link href="1.css" rel="stylesheet" type="text/css" id="css" 我定义的id是css。 第二步:写一个js函数,代码如下: script type="text/javascript&q...
标签: 幼儿园 宝宝
宝宝上幼儿园“五要”原则 孩子刚刚入园,全家人都会有不同程度的担心:孩子在幼儿园会不会没吃饱,会不会想念家人,会不会受小朋友的欺负……于是接孩子回家后,就会出现许多新的话题。为了让孩子更好地适应幼儿园的集体生活,我们提出以下五要原则,供广大家长参考。五要分别是:要走路回家孩子刚刚入园,离开家人一整天,见到...
标签: word
两种方法清除Word2013文档中的样式   方法1:打开Word2013文档窗口,选中需要清除样式的文本或段落。在开始功能区单击样式分组中的样式按钮,打开样式任务窗格。在样式列表中单击全部清除按钮即可清除所有样式,如图1www.tulaoshi.com所示。 图1 单击全部清除按钮 方法2:打开Word2013文档窗口,选中需要清除样式的文本...

经验教程

690

收藏

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