-
自然排名 點(diǎn)擊多少均不要錢(qián)喲！
可能會(huì)幫您的生意提高幾倍，幾十倍 -
制作網(wǎng)頁(yè)時(shí)我們經(jīng)常需要一些細(xì)的分隔線。我們通常的作法是用單元格填充背景來(lái)實(shí)現(xiàn)，這在一些時(shí)候當(dāng)然是不錯(cuò)的做法，但這樣做顯然不夠靈活：比如對(duì)長(zhǎng)度的控制不靈活、對(duì)位置的變換控制不靈活等。另一方面，正是因?yàn)檫@些單元格的存在，有時(shí)會(huì)把表格變得很復(fù)雜，從而難以維護(hù)。還有一種HTML自帶的分隔線就是＜HR＞，但它要占據(jù)一行的位置，在一些細(xì)致的布局上會(huì)很麻煩，而且它只是橫向的，而非縱向的。
而事實(shí)上，有一種看上去似乎很原始的方法被我們忽略了：用圖片。
你是不以為聽(tīng)錯(cuò)了呢？沒(méi)有，就是用圖片！不要聽(tīng)見(jiàn)圖片就覺(jué)得網(wǎng)頁(yè)會(huì)變得臃腫，關(guān)鍵是要看怎么用圖片。
一個(gè)黑色的1px×1px的圖片有多大？我可以告訴你：43字節(jié)，如右圖。（為了便于大家閱讀，我們將圖片顯示為20px×20px）我們就是用這樣一張圖片來(lái)實(shí)現(xiàn)靈活多變的分隔線。
來(lái)看下面實(shí)例：
隨心所欲控制長(zhǎng)短：
?。糹mg height=1 src="yl-021113-1-pic1.gif" width=100＞
?。糹mg height=1 src="yl-021113-1-pic1.gif" width=200＞
?。糹mg height=1 src="yl-021113-1-pic1.gif" width=300＞
隨心所欲控制粗細(xì)：
＜img height=1 src="yl-021113-1-pic1.gif" width=300＞
?。糹mg height=2 src="yl-021113-1-pic1.gif" width=300＞
?。糹mg height=3 src="yl-021113-1-pic1.gif" width=300＞
縱向的？沒(méi)有問(wèn)題：
?。糹mg height=100 src="yl-021113-1-pic1.gif" width=1＞
?。糹mg height=80 src="yl-021113-1-pic1.gif" width=2＞
?。糹mg height=60 src="yl-021113-1-pic1.gif" width=3＞
聰明的你一定已經(jīng)明白了，上面的那些線就是用一張1px×1px的圖片強(qiáng)制定義尺寸實(shí)現(xiàn)的，是不很容易呢？而這張圖片只有43字節(jié)大??！實(shí)現(xiàn)的過(guò)程**是強(qiáng)制定義一下尺寸，要比其他一些方法容易的多，用起來(lái)也靈活的多，因?yàn)樗梢噪S意定義尺寸，隨意更換位置。
接下來(lái)我們?cè)倏聪旅孢@個(gè)例子：
＜img height=10 src="yl-021113-1-pic2.gif" width=300＞
這里筆者只是隨便做的一個(gè)例子，類(lèi)似這種修飾條在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中還是比較常見(jiàn)的，通常的做法是做一個(gè)1px寬的小圖片，做為單元格的背景填充；或者是做成實(shí)際尺寸大小的圖片。
其實(shí)完全沒(méi)有必要做成實(shí)際尺寸大小的圖片，我們做成1px寬（高度是實(shí)際高度）的小圖片，然后強(qiáng)制定義一下尺寸就可以了。比如上例就是一張1px*10px的圖片，如右圖。（為了便于大家閱讀，我們將圖片顯示為8px×80px），放到網(wǎng)頁(yè)中時(shí)定義成300px*10px就可以了，或者你認(rèn)為這與填充成背景沒(méi)什么區(qū)別，的確，用的是同樣的圖片，但這樣做會(huì)更靈活，而不再受單元格的限制。如果是縱向的，道理是一樣的，就不再贅述。
一點(diǎn)小經(jīng)驗(yàn)，希望能夠?qū)Υ蠹矣杏谩?/P>
網(wǎng)頁(yè)設(shè)計(jì)小技巧:隨心所欲的分隔線，與大家多多交流。
