完美的宽度自适应的表格_层和布局特效
结合了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>
。