Web Design

在製作網頁時我們經常需要一些細的分隔線。我們通常的作法是用單元格填充背景來實現，這在一些時候當然是不錯的做法，但這樣做顯然不夠靈活：比如對長度的控制不靈活、對位置的變換控制不靈活等。另一方面，正是因為這些單元格的存在，有時會把表格變得很複雜，從而難以維護。還有一種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就可以了，或者你認為這與填充成背景沒什麼區別，的確，用的是同樣的圖片，但這樣做會更靈活，而不再受單元格的限制。如果是縱向的，道理是一樣的，就不再贅述。

　　一點小經驗，希望能夠對大家有用。