網(wǎng)(LieHuo.Net)教程 三行的純CSS網(wǎng)站導(dǎo)航欄菜單,改改風(fēng)格,讓大家感到新鮮一點(diǎn),其它主要還是使用了Li列表,整體布局簡(jiǎn)潔,美觀大方,適合大部分網(wǎng)站使用,顏色和菜單空隙可隨意調(diào)節(jié),希望大家喜歡。
<!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" content="text/html; charset=utf-8" /><title>多行的導(dǎo)航欄</title><style type="text/css">* { margin:0; padding:0; }body { font:12px/180% Verdana, Geneva, sans-serif; }li { list-style:none; }a { text-decoration:none; color:#999; }a:hover { color:#900; text-decoration:underline; }.nav_sub { width:700px; margin:0 auto; height:1%; overflow:hidden; margin-bottom:10px; background:#EDEEEF; }.title_nav_sub { display:block; padding:3px 20px; text-align:center; background:#48862F; color:#fff; float:left; }.nav_sub ul { float:left; }.nav_sub ul li { display:inline; }.nav_sub ul a { float:left; padding:3px 20px; }.more { float:right; }</style></head><body><div class="nav_sub"><span class="title_nav_sub">源碼</span><ul><li><a href="#" title="liehuo.net">ASP</a></li><li><a href="#" title="liehuo.net">PHP</a></li><li><a href="#" title="liehuo.net">JSP</a></li><li><a href="#" title="liehuo.net">DELPHI</a></li><li><a href="#" title="liehuo.net">VS</a></li><li><a href="#" title="liehuo.net">AJAX</a></li><li><a href="#" title="liehuo.net">JQUERY</a></li></ul><a href="#" title="liehuo.net" class="more">更多>></a> </div><div class="nav_sub"><span class="title_nav_sub">特效</span><ul><li><a href="#" title="liehuo.net">導(dǎo)航菜單類(lèi)</a></li><li><a href="#" title="liehuo.net">CSS布局類(lèi)</a></li><li><a href="#" title="liehuo.net">表單及按鈕</a></li><li><a href="#" title="liehuo.net">圖片切換</a></li><li><a href="#" title="liehuo.net">鼠標(biāo)特效</a></li></ul><a href="#" title="liehuo.net" class="more">更多>></a> </div><div class="nav_sub"><span class="title_nav_sub">文章</span><ul><li><a href="#" title="liehuo.net">ASP教程</a></li><li><a href="http://www.jyygyx.com/" title="liehuo.net">站長(zhǎng)資訊</a></li><li><a href="#" title="liehuo.net">PHP技術(shù)</a></li><li><a href="#" title="liehuo.net">SEO</a></li><li><a href="#" title="liehuo.net">其它</a></li></ul><a href="#" title="liehuo.net" class="more">更多>></a> </div></body></html><br /><center>如不能顯示效果,請(qǐng)按Ctrl+F5刷新本頁(yè),更多網(wǎng)頁(yè)代碼:<a href='http://www.jyygyx.com/' title="liehuo.net" target='_blank'>http://www.jyygyx.com/</a></center>提示:可修改后代碼再運(yùn)行!
上一篇 jQuery1.3.2源碼學(xué)習(xí)5:jQuery 中的原型
下一篇 加解密文本的函數(shù)
程序員人生,我編程,我富裕,記住wfuyu網(wǎng),php教程,php學(xué)習(xí),php手冊(cè),CMS模版制作
聲明:本站大部分內(nèi)容是作者原創(chuàng),少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí),原版權(quán)很多不明,如有侵權(quán)請(qǐng)聯(lián)系本站,謝謝!
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有