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