CSS使用LI實現2組4列的文章列表并垂直對齊_層和布局特效
用CSs的LI標簽實現一行內容分成左右兩組顯示，每組又分成左邊顯示標題，右邊顯時間的效果，用背景圖片顯示邊線，這樣結構清淅明了，很有層次感，同時學習CSS布局的朋友本實例也是值得看的。<!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=gb2312" /> <title>LI 2組4列的文章列表并垂直對齊</title> <style> *{margin:0;padding:0;border:0;list-style:none;font-size:12px; font-family:"宋體"} a{color:#333;text-decoration:none;} a:hover{color:#555;text-decoration:underline;} .submrc{width:999px;margin:10px auto;1122123<img src=http://p1.mb5u.com/texiao/3/20100522231333318.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231333318.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231333318.gif) repeat-y;border-top:1px solid #9c9b9a;border-bottom:1px solid #9c9b9a;overflow:hidden} .submrc ul{margin:15px 0;width:999px;overflow:hidden} .submrc li{float:left;width:44%;line-height:23px;1122123<img src=http://p1.mb5u.com/texiao/3/20100522231333319.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231333319.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231333319.gif) no-repeat 30px 10px;padding-left:40px;overflow:hidden; display:inline;margin-right:15px} .submrc li span{float:right;color:#555} .space{display:block;clear:both;width:900px;height:15px;overflow:hidden;} .submrc .gray a{color:#555} </style> </head> <body> <div class="submrc"> <ul> <li><span>2009-08-07</span><a href="#">VCLZip Pro v3.0 Delphi壓縮/解壓控件</a></li> <li><span>2009-08-07</span><a href="#">鄭智即將以250萬鎊重返英超</a></li> <li><span>2009-08-07</span><a href="#">C# 單人電腦對戰五子棋源代碼</a></li> <li><span>2009-08-07</span><a href="#">《vb.net高級開發指南》教程電子書 PDF</a></li> <li><span>2009-08-07</span><a href="#">鄭智即將以250萬鎊重返英超</a></li> <li><span>2009-08-07</span><a href="#">C# 單人電腦對戰五子棋源代碼</a></li> <span class="space"></span> <li class="gray"><span>2009-08-07</span><a href="#">PHP愛好者留言本 v2.0</a></li> <li class="gray"><span>2009-08-07</span><a href="#">VCLZip Pro v3.0 Delphi壓縮/解壓控件</a></li> <li class="gray"><span>2009-08-07</span><a href="#">風之相隨php留言本 v2.4.1 </a></li> <li class="gray"><span>2009-08-07</span><a href="#">《vb.net高級開發指南》教程電子書 PDF</a></li> <li class="gray"><span>2009-08-07</span><a href="#">VCLZip Pro v3.0 Delphi壓縮/解壓控件</a></li> <li class="gray"><span>2009-08-07</span><a href="#">風之相隨php留言本 v2.4.1 </a></li> </ul> </div> </body> </html>
。