xpcjh 2006-11-8 07:18
网页小技巧:随心所欲的分隔线
在制作网页时我们经常需要一些细的分隔线。我们通常的作法是用单元格填充背景来实现，这在一些时候当然是不错的做法，但这样做显然不够灵活：比如对长度的控制不灵活、对位置的变换控制不灵活等。另一方面，正是因为这些单元格的存在，有时会把表格变得很复杂，从而难以维护。还有一种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就可以了，或者你认为这与填充成背景没什么区别，的确，用的是同样的图片，但这样做会更灵活，而不再受单元格的限制。如果是纵向的，道理是一样的，就不再赘述。
一点小经验，希望能够对大家有用。
[quote][table=50%][tr][td] [/size]
[size=6][b][color=blue]☞[/b][/size][url=http://cui.qq.topzj.com/thread-362873-1-1.html][color=Red][b][font=黑体]点这里查看我的部份精彩文章索引[/font][/b][/color][/url]
[/b][/color]
[/size][/td][/tr][/table][/quote]
[[i] 本帖最后由 xpcjh 于 2006-11-19 23:05 编辑 [/i]]
城市困兽 2006-11-12 01:10
[size=8pt][url=http://www.igogo8.com/][img]http://img.igogo8.com/igoogle8/makebbs/1%25252F16%25252F%2525E7%25259C%25258B%2525E8%2525B4%2525B4%2525E4%2525B8%25258D%2525E9%2525A1%2525B6%2525EF%2525BC%25258C%2525E6%2525B7%2525B7%2525E8%25259B%25258B.gif[/img][/url][/size]
zhanghetao 2006-11-12 01:12
????????
tianciyz 2006-11-12 15:31
:lol :lol :lol
shikaionly 2006-11-17 16:28
ddddddddd
kcliangting 2007-5-20 00:11
500论坛币，太好了，我有希望了呀
我看了。。 恨好啊。。 。