您當前位置：首頁 > web前端 > htmlcss > 純CSS 無序列表打造的網站導航菜單

純CSS 無序列表打造的網站導航菜單

來源：程序員人生發布時間：2013-10-04 05:31:23 閱讀次數：3005次

　　網(LieHuo.Net)教程三行的純CSS網站導航欄菜單，改改風格，讓大家感到新鮮一點，其它主要還是使用了Li列表，整體布局簡潔，美觀大方，適合大部分網站使用，顏色和菜單空隙可隨意調節，希望大家喜歡。

<!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>多行的導航欄</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">導航菜單類</a></li><li><a href="#" title="liehuo.net">CSS布局類</a></li><li><a href="#" title="liehuo.net">表單及按鈕</a></li><li><a href="#" title="liehuo.net">圖片切換</a></li><li><a href="#" title="liehuo.net">鼠標特效</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.vxbq.cn/" title="liehuo.net">站長資訊</a></li><li><a href="#" title="liehuo.net">PHP技術</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>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' title="liehuo.net" target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 jQuery1.3.2源碼學習5:jQuery 中的原型

下一篇 加解密文本的函數

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

純CSS 無序列表打造的網站導航菜單