html边框直线,在网页中实现细线边框的两种方法-网页设计,HTML/CSS

很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细边框这个制作方法是必不可少的。这里，我将简单地谈一下细边框的制作方法。

谈到细边框，本人认为大致有两种制作方法，第一种是用表格的嵌套，第二种是用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〉

html边框直线,在网页中实现细线边框的两种方法-网页设计,HTML/CSS相关推荐

Java中的string定义的两种方法和区别
java中的String定义的两种方法和区别第一种:new方式 String s1 = new String("hello world"); String s2 = new St ...
多元统计分析matlab,MATLAB的统计工具箱中的多元统计分析中提供了聚类分析的两种方法...
MATLAB的统计工具箱中的多元统计分析中提供了聚类分析的两种方法: 1.层次聚类hierarchical clustering 2.k-means聚类这里用最简单的实例说明以下层次聚类原理和应用发 ...
WPF中在XAML中实现数据类型转换的两种方法
WPF中在XAML中实现数据类型转换的两种方法原文:WPF中在XAML中实现数据类型转换的两种方法熟悉数据绑定的朋友都知道,当我们在Model中获取一个对象的数据,常常需要对其进行数据转换后显示在 ...
python怎么清屏_python实现清屏的方法 Python Shell中清屏一般有两种方法。
Python Shell 怎样清屏? Python Shell中清屏一般有两种方法. 奈何一个人随着年龄增长,梦想便不复轻盈:他开始用双手掂量生活,更看重果实而非花朵.--叶芝<凯尔特的搏暮&g ...
VB中FSO的调用的两种方法
方法一: Dim objFso Set objFso = CreateObject("Scripting.FileSystemObject") ...
Revit插件教学丨Revit中绘制斜楼板的两种方法?
Revit插件教学丨Revit中绘制斜楼板的两种方法? 我们经常遇到一些斜楼板,很多朋友不知道如何画好楼板,经常在公众号留言说怎么画好楼板,怎么快速高效.但我相信很多玩Revit的玩家都很熟悉,今天和 ...
将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法
将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法前言 Hash History 完事前言之前有个项目要同时做小程序和APP,本着节省时间的想法,研究了下un ...
计算机word降序排列怎么做,word中怎么进行排序的两种方法
word文档中表格除了作为我们的编辑和展示功能之外,还可以进行排序功能,十分方便,那么下面就由学习啦小编给大家分享下word中进行排序的技巧,希望能帮助到您. word中进行排序方法一: 步骤一:将光 ...
Linux中增加软路由的两种方法
Linux中增加软路由的两种方法第一种: route add -net 172.16.6.0 netmask 255.255.255.0 gw 172.16.2.254 dev eth0 /* 增加 ...
怎么查看linux中的环境变量,linux中查看环境变量的两种方法
linux中查看环境变量有两种方法: 第一种是看系统环境变量的配置文件: /etc/profile这个是环境变量配置文件,里面是应经配置号的环境变量.当你在Ubuntu上安装配置jdk的JAVA_HO ...

html边框直线,在网页中实现细线边框的两种方法-网页设计,HTML/CSS

html边框直线,在网页中实现细线边框的两种方法-网页设计,HTML/CSS相关推荐

最新文章

热门文章