CSS使用LI實現2組4列的文章列表并垂直對齊_層和布局特效
      
查看演示效果
      


      特效Tag：一行兩列添加
      


      

      用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# 單人電腦對戰(zhàn)五子棋源代碼</a></li>
<li><span>2009-08-07</span><a href="#">《vb.net高級開發(fā)指南》教程電子書 PDF</a></li>
<li><span>2009-08-07</span><a href="#">鄭智即將以250萬鎊重返英超</a></li>
<li><span>2009-08-07</span><a href="#">C# 單人電腦對戰(zhàn)五子棋源代碼</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高級開發(fā)指南》教程電子書 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>    
      


      

      


      所屬頻道：層和布局特效/更新時間：2012-11-13


      


      



      


      



      相關層和布局特效：
      




      

      層和布局特效Rss訂閱特效代碼搜索