DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> div+css最標准TOP排行榜或新聞列表
div+css最標准TOP排行榜或新聞列表
編輯:WEB前端代碼     
div+css最標准TOP排行榜或新聞列表,查看效果:http:///keleyi/phtml/topcss/


<!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>
<title>div+css最標准TOP排行榜或新聞列表</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#b52725;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
.demo{width:520px;margin:40px auto;}
/* ranklist_keleyi_com */
.ranklist_keleyi_com{border:solid 1px #ddd;padding:10px 10px 0 10px;margin:0px;}
.ranklist_keleyi_com li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;}
.ranklist_keleyi_com li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist_keleyi_com li em{background-position:0 -16px;}
.ranklist_keleyi_com li.top em{background-position:0 0;color:White; background-color:Red;}
.ranklist_keleyi_com li .num{position:absolute;right:0;top:0;color:#999;}
.boxtitle{background-color:blue;color:White;margin:0px;font-size:16px;}
</style>
</head>
<body>
<div class="demo">
<span class="boxtitle">div+css最標准TOP排行榜或新聞列表</span>
<div class="ranklist_keleyi_com">
<ol>
<li class="top">
<em>01</em><p><a href="http:///a/bjac/4064796bf1f324c8.htm" title="留言板:ASP.NET MVC4實例">留言板:ASP.NET MVC4實例</a></p><span class="num">36629</span>
</li>
<li class="top">
<em>02</em><p><a href="http:///article/wenzhang47.htm" title="查看.NET程序集的PublicKeyToken(公鑰標記)的方法(猜數字游戲下載)">查看.NET程序集的PublicKeyToken(公鑰標記)的方法(猜數字游戲下載)</a></p><span class="num">26305</span>
</li>
<li class="top">
<em>03</em><p><a href="http:///a/bjac/781ba7719ce323f.htm" title="ASP.NET MVC4中使用AJAX">ASP.NET MVC4中使用AJAX</a></p><span class="num">25963</span>
</li>
<li>
<em>04</em><p><a href="http:///a/bjac/c07969353e71816f.htm" title="SQL2005導出數據為腳本">SQL2005導出數據為腳本</a></p><span class="num">23007</span>
</li>
<li>
<em>05</em><p><a href="http:///a/bjac/7e8897e5ec0849e9.htm" title="可改變大小DIV層">可改變大小DIV層</a></p><span class="num">19829</span>
</li>
<li>
<em>06</em><p><a href="http:///dev/beb40909418eb322.htm" title="WinForm 子窗體居中於父窗體代碼">WinForm 子窗體居中於父窗體代碼</a></p><span class="num">19035</span>
</li>
</ol>
<div class="clear"></div>
</div>
</div>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved