UL、LI 無序列表實現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單

發(fā)布時間：2009-11-08 22:13:04 作者：佚名

三行的純CSS網(wǎng)站導(dǎo)航欄菜單，改改風(fēng)格，讓大家感到新鮮一點，其它主要還是使用了Li列表，整體布局簡潔，美觀大方，適合大部分網(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=gb2312" /> <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="#">ASP</a></li> <li><a href="#">PHP</a></li> <li><a href="#">JSP</a></li> <li><a href="#">DELPHI</a></li> <li><a href="#">VS</a></li> <li><a href="#">AJAX</a></li> <li><a href="#">JQUERY</a></li> </ul> <a href="#" class="more">更多>></a> </div> <div class="nav_sub"><span class="title_nav_sub">特效</span> <ul> <li><a href="#">導(dǎo)航菜單類</a></li> <li><a href="#">CSS布局類</a></li> <li><a href="#">表單及按鈕</a></li> <li><a href="#">圖片切換</a></li> <li><a href="#">鼠標(biāo)特效</a></li> </ul> <a href="#" class="more">更多>></a> </div> <div class="nav_sub"><span class="title_nav_sub">文章</span> <ul> <li><a href="#">ASP教程</a></li> <li><a href="#">站長資訊</a></li> <li><a href="#">PHP技術(shù)</a></li> <li><a href="#">SEO</a></li> <li><a href="#">其它</a></li> </ul> <a href="#" class="more">更多>></a> </div> </body> </html>

提示：您可以先修改部分代碼再運行

Tag：純CSS 導(dǎo)航菜單

相關(guān)文章

CSS實現(xiàn)ul和li橫向排列的兩種方法
這篇文章主要介紹了CSS實現(xiàn)ul和li橫向排列的兩種方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)
2020-02-21
CSS的ul和li實現(xiàn)橫向排列和去掉li的點
怎么實現(xiàn)ul的橫向排列和去掉li那個煩人的點，現(xiàn)在找到方法了，在此與大家分享下，感興趣的朋友可以參考下，以備不時之需
2013-10-23
css中ul li的背景小圖標(biāo)屬性設(shè)置的兩種情況
ul li的背景小圖標(biāo)屬性設(shè)置一般會有兩種情況：定義在ul里及l(fā)i里，這兩種定義在什么情況下使用，在下文給出詳細的介紹，經(jīng)常div+css布局的朋友不妨參考下，希望對大家有所幫
2013-09-27
創(chuàng)建CSS樣式文本導(dǎo)航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來很合理也很直觀，接下來為大家介紹下具體的創(chuàng)建過程，感興趣的朋友可以參考
2013-09-21

css控制UL LI 的樣式詳解(推薦)

DIV+CSS里，我們用得最多的就是ul li來顯示數(shù)據(jù)，如新聞按鈕等,下面給大家一個css ul li的例子供學(xué)習(xí)

2023-05-21

CSS經(jīng)驗:ul列表不正確使用的趨勢

網(wǎng)頁制作Webjx文章簡介：不知道是標(biāo)準害了大家還是大家害了標(biāo)準，繼class和div被濫用后，ul列表也有被不正確使用的趨勢。今天交流會上，分享前端的開發(fā)經(jīng)

2009-04-02

CSS在UL LI的樣式用法(UI上的應(yīng)用)

這篇文章主要介紹了CSS在UL LI的樣式用法，主要是UI上的應(yīng)用，我們通過代碼分離的方式通過css完全控制css的樣式

2023-05-21

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

UL、LI 無序列表實現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容