類似門戶網站的CSS雙行導航菜單

2024-09-05 12:20:09

字體：大中小

來源：轉載

供稿：網友

類似門戶網站的導航效果，雙行排列，完全基于CSS代碼實現，單個菜單像按鈕，組合成一塊效果就更精致了，用到3張背景圖片，不要忘記下載。

<!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>雙行導航菜單</title><style type="text/css"></style><script type="text/javascript">function area_nav(index){for(var i=1;i<=2;i++){        if( document.getElementById("nav"+i.toString()) != null )        {                document.getElementById("nav"+i.toString()).style.display = 'none';                }}        document.getElementById("nav"+index.toString()).style.display = 'block';}</script></head><body><div   class="dhzbbhp"   id="nav1" class="nav">	<div   id="bjnbzrb"   class="menu">		<div   id="jrtztdt"   class="middle" style="width: 670px; height: 74px">			<ul>				<li>					<b style="color:#FF0000">源碼首頁</b>				</li>				<li>										最新更新				</li>				<li>					源碼分類				</li>				<li>					下載排行				</li>				<li>					ASP源碼				</li>				<li>					<b style="color:#FF0000">PHP源碼</b>				</li>				<li>					Ajax源碼				</li>				<li>					Delphi源碼				</li>				<li>					VC++源碼				</li>				<li>					網頁特效				</li>				<li>					菜單導航				</li>				<li>					層和布局				</li>				<li>					<b style="color:#330099">文字鏈接</b>				</li>				<li>					<b style="color:#FF0000">圖片特效</b>				</li>				<li>					<b style="color:#FF0000">表單按鈕</b>				</li>				<li>					游戲娛樂				</li>				<li>					計算轉換				</li>				<li>					廣告特效				</li>			</ul>		</div>    </div></div></body></html>

上一篇：向上滑動的藍色大氣導航菜單

下一篇：左側動畫展開的輔助菜單