完美的寬度自適應的表格_層和布局特效
結合了LI無序列表，又結合了背景圖片，完成了一個完美的寬度自適應的表格，還是隔行換色的，不論你的瀏覽器窗口有多寬，表格寬度和單元 格寬度都會隨著改變，爽吧，不過有一點就是，用圖片定義了它的高度，因此在調整高度時有點不方便，需要修改圖片才行。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" /> <title>無序列表寬度自適應表格</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231218298.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231218298.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231218298.gif); zoom:1;} li { width:20%; *width:19.9%;/*IE6&IE7的寬度有點囧*/ float:left;} span { display:block; border-left:1px solid #cfdae8; height:24px; font-size:12px; line-height:24px; padding:0 4px;} </style> </head> <body> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> <br /><br />不管瀏覽器的窗口有多寬，它都會自適應寬度。</body> </html>
。