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>
。