当前位置：网站综合首页 >> 建站资源 >> 站长手册 >> 网页小技巧:随心所欲的分隔线

网页小技巧:随心所欲的分隔线

来源：中国设计秀作者：点击：22 加入收藏发表评论

顶一下

在制作网页时我们经常需要一些细的分隔线。我们通常的作法是用单元格填充背景来实现，这在一些时候当然是不错的做法，但这样做显然不够灵活：比如对长度的控制不灵活、对位置的变换控制不灵活等。另一方面，正是因为这些单元格的存在，有时会把表格变得很复杂，从而难以维护。还有一种HTML自带的分隔线就是＜HR＞，但它要占据一行的位置，在一些细致的布局上会很麻烦，而且它只是横向的，而非纵向的。

　　而事实上，有一种看上去似乎很原始的方法被我们忽略了：用图片。

　　你是不以为听错了呢？没有，就是用图片！不要听见图片就觉得网页会变得臃肿，关键是要看怎么用图片。

　　一个黑色的1px×1px的图片有多大？我可以告诉你：43字节，如右图。（为了便于大家阅读，我们将图片显示为20px×20px）我们就是用这样一张图片来实现灵活多变的分隔线。

　　来看下面实例：

　　随心所欲控制长短：

　　

　　＜IMG height=1 src="yl-021113-1-pic1.gif" width=100＞

　　

　　＜IMG height=1 src="yl-021113-1-pic1.gif" width=200＞

　　

　　＜IMG height=1 src="yl-021113-1-pic1.gif" width=300＞

　　随心所欲控制粗细：
　　

　　＜IMG height=1 src="yl-021113-1-pic1.gif" width=300＞

　　

　　＜IMG height=2 src="yl-021113-1-pic1.gif" width=300＞

　　

　　＜IMG height=3 src="yl-021113-1-pic1.gif" width=300＞

　　纵向的？没有问题：

　　

　　＜IMG height=100 src="yl-021113-1-pic1.gif" width=1＞

　　　　＜IMG height=80 src="yl-021113-1-pic1.gif" width=2＞

　　　　＜IMG height=60 src="yl-021113-1-pic1.gif" width=3＞

　　聪明的你一定已经明白了，上面的那些线就是用一张1px×1px的图片强制定义尺寸实现的，是不很容易呢？而这张图片只有43字节大小！实现的过程仅仅是强制定义一下尺寸，要比其他一些方法容易的多，用起来也灵活的多，因为它可以随意定义尺寸，随意更换位置。

　　接下来我们再看下面这个例子：

　　

　　＜IMG height=10 src="yl-021113-1-pic2.gif" width=300＞

　　这里笔者只是随便做的一个例子，类似这种修饰条在网页设计当中还是比较常见的，通常的做法是做一个1px宽的小图片，做为单元格的背景填充；或者是做成实际尺寸大小的图片。

　　其实完全没有必要做成实际尺寸大小的图片，我们做成1px宽（高度是实际高度）的小图片，然后强制定义一下尺寸就可以了。比如上例就是一张1px*10px的图片，如右图。（为了便于大家阅读，我们将图片显示为8px×80px），放到网页中时定义成300px*10px就可以了，或者你认为这与填充成背景没什么区别，的确，用的是同样的图片，但这样做会更灵活，而不再受单元格的限制。如果是纵向的，道理是一样的，就不再赘述。

　　一点小经验，希望能够对大家有用。

2005-09-09 23:11:00 出处：http://www.cnwebshow.com.cn

本文引用地址：http://www.cnwebshow.com/site/html/article_21.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板