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



站長之家推出“新聞門戶欄目導航”網站模塊的實現


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

本文來介紹一種比較實用的網站模塊“新聞門戶欄目導航”,很多大型網站上都使用過這種網站模塊,這種網站模塊實現起來也很簡單。各位站長們可以通過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; padding:0; overflow:hidden;}
ul.bar li{text-align:left; padding-right:10px; border-right:1px dashed #babbbb; overflow:hidden; float:left; font-size:12px; line-height:20px;}
ul.bar li.left{width:164px;}
ul.bar li.mid{width:150px;}
ul.bar li.right{width:120px; border-right:0; padding-right:0;}
ul.bar li a{padding-left:15px; float:left; color:#000000; text-decoration:none;}
ul.bar li a:hover{color:#BA2636;text-decoration:underline}
</style>

</head>
<body>

<ul class="bar">
<li class="left">
<b><a href="#">網站</a></b><a href="#">建站</a><a href="#">優化</a><a href="#">維護</a><br />
<b><a href="#">素材</a></b><a href="#">圖標</a><a href="#">壁紙</a><a href="#">圖片</a><br />
<b><a href="#">網站</a></b><a href="#">建站</a><a href="#">優化</a><a href="#">維護</a><br />
<b><a href="#">工具</a></b><a href="#">查IP</a><a href="#">編碼</a><a href="#">解碼</a>
</li>
<li class="mid">
<b><a href="#">空間</a></b><a href="#">服務器</a><a href="#">云主機</a><br />
<b><a href="#">工具</a></b><a href="#">IP查詢</a><a href="#">編解碼</a><br />
<b><a href="#">空間</a></b><a href="#">服務器</a><a href="#">云主機</a><br />
<b><a href="#">動態</a></b><a href="#">新活動</a><a href="#">大酬賓</a>
</li>
<li class="right">
<b><a href="#">網站</a></b><a href="#">建站</a><a href="#">優化</a><br />
<b><a href="#">素材</a></b><a href="#">圖標</a><a href="#">壁紙</a><br />
<b><a href="#">網站</a></b><a href="#">建站</a><a href="#">優化</a><br />
<b><a href="#">工具</a></b><a href="#">查IP</a><a href="#">編碼</a>
</li>
</ul>

</body>
</html>

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

新聞門戶欄目導航網站模塊實例圖片二


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

信息顯示圖片
頁腳blank圖片

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

四川快乐12开奖号