4当前位置:网页制作HTML教程-在网页中实现细线边框的两种方法
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
4本站推荐内容
4最新网页制作
·解决点击空链接返回…
·简述div+css网页布…
·自适应高度的iframe…
·XHTML+CSS页面转换…
·深层探密网页表格
·HTML语法基础及规则
·超级链接标记(A)…
·滚动字幕标记(marq…
·让弹出窗口变得“友…
·如何让浏览者记住你…
4热门网页制作
·两种网页滚动字幕代码
·设置select宽度
·在网页中实现细线边…
·HTML语法基础及规则
·滚动字幕标记(marq…
·表单提交后submit按…
·隐藏状态栏的超链接…
·如何让浏览者记住你…
·隐藏网页源代码方法…
·制作漂亮的三维表格
4相关网页制作
·修正IE5解释容器宽…
·几种网页元素居中方…
·<li>和<hr>的样…
·修正IE5解释容器宽…
·与HTML相比,XHTML…
·对Web页面元素的绝…
·HTML文件HEAD内部标…
·解密.htm.html.shtm…
·图例分析outerHTML…
·修正IE5解释容器宽…
在网页中实现细线边框的两种方法
类别:HTML教程    来源:网络    时间:2006-5-13    贴士:推荐给好友
收藏本页 8 
    如今,众多网页的设计都用到了表格,这样不仅有利于网页的维护,同时也提高了网页的观赏性。在众多网页制作风格中,细线边框这个制作方法是必不可少的。这里,简单地谈一下细边框的制作方法。

  谈到细线边框,大致有两种制作方法,第一种是用表格的嵌套,第二种是用CSS强制定义。

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

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

  两种方法的代码如下:
第一种方法:
<table border="0" cellpadding="0" cellspacing="1" bgcolor=black>
  <tr>
 <td bgcolor=white>中国站长天空</a></td>
  </tr> 
</table>
<br>
第二种方法:
<table border="0" cellpadding="0" cellspacing="0" bgcolor=white>
  <tr>
  <td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid; BORDER-bottom: black 1px solid;">中国站长天空</td>
  <td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid; BORDER-bottom: 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>
·上一篇:分组显示的select下拉选框
·下一篇:五种弹出窗口代码
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2008 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备08002933号