站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:網站首頁 >> 網站技術 >>



站長之家推出“短欄目與標題列表”網站模塊的實現


【發布人:站長之家    發布日期:2015-04-05】

本文來介紹一種比較實用的網站模塊“短欄目與標題列表”,見下圖所示,下圖為站長之家從大型網站搜狐網站上截圖下來的。

短欄目與標題列表網站模塊實例圖片一

很多大型網站上都使用過這種網站模塊,這種網站模塊實現起來也很簡單。各位站長們可以通過DIV+CSS技術來實現,非常適合于很多大型網站。在此利用DIV+CSS技術制作和測試了這種“短欄目與標題列表”的網站模塊,也就是左邊顯示的是“欄目名稱”,右邊顯示的是這個欄目下的一些新聞或者其他標題列表,各位站長們也可以在自己的網站上實現這樣的布局。下面是“短欄目與標題列表”的網站模塊實現的實例代碼,該代碼在多個瀏覽器如IE、Chrome、360瀏覽器上都能正常測試通過,各位站長們可以直接參考使用,甚至將代碼直接運用到自己的網站上:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>推出“短欄目與標題列表”網站模塊的實現</title>

<style type="text/css">
ul.bar{ list-style:none; margin:0 auto; width:350px; text-align:left; padding:0;}
ul.bar li{height:28px; line-height:28px; text-indent:15px; background:url(ico.gif) no-repeat 1px 13px; overflow:hidden;}
ul.bar li span.span_left{ font-size:14px; font-weight:bold;}
ul.bar li span.span_left a{ color:#000;}
ul.bar li span.span_mid{ color:#AAA;}
ul.bar li span.span_right{ font-size:12px;}
ul.bar li span.span_right a{ color:#555;}
</style>

</head>
<body>

<ul class="bar">
<li>
<span class="span_left"><a href="#">站長</a></span>
<span class="span_mid">|</span>
<span class="span_right"><a href="#">站長網交流平臺開通了</a> <a href="#">可以投稿了</a></span>
</li>
<li>
<span class="span_left"><a href="#">建站</a></span>
<span class="span_mid">|</span>
<span class="span_right"><a href="#">網站建設的注意事項</a> <a href="#">建站后的維護工作如何做</a></span>
</li>
<li>
<span class="span_left"><a href="#">優化</a></span>
<span class="span_mid">|</span>
<span class="span_right"><a href="#">網站優化的幾種黑帽手法</a> <a href="#">網站降權后如何恢復</a></span>
</li>
<li>
<span class="span_left"><a href="#">素材</a></span>
<span class="span_mid">|</span>
<span class="span_right"><a href="#">站長網素材專欄更新了</a> <a href="#">歡迎為本站提供素材</a></span>
</li>
<li>
<span class="span_left"><a href="#">工具</a></span>
<span class="span_mid">|</span>
<span class="span_right"><a href="#">URL編碼解碼工具上線了</a> <a href="#">32位MD5加密工具始測</a></span>
</li>
</ul>

</body>
</html>

本實例代碼顯示的結果示意圖如下:

短欄目與標題列表網站模塊實例圖片二


(本頁地址為:http://www.hdfwko.tw/tech/tech-12.html,請尊重別人的勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家【www.hdfwko.tw】

四川快乐12开奖号