CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)

一、CSS導(dǎo)航欄
(1)導(dǎo)航欄的作用
熟練使用導(dǎo)航欄,對于網(wǎng)站排版非常重要,使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。
(2)垂直導(dǎo)航欄
<1>代碼如下
<!doctyre html> <html> <head> <meta charset="utf-8"> <title>垂直導(dǎo)航欄</title> <link rel="stylesheet" href="daohanglan1.css"/> </head> <body> <ul> <li><a class="active" href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯(lián)系</a></li> <li><a href="#about">關(guān)于</a></li> </ul> <div> <h2>垂直導(dǎo)航欄</h2> <h3>垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄</p> <p>垂直導(dǎo)航欄</p> <p>垂直導(dǎo)航欄</p> <p>垂直導(dǎo)航欄</p> <p>垂直導(dǎo)航欄</p> <p>垂直導(dǎo)航欄</p> <p>垂直導(dǎo)航欄</p> <p>垂直導(dǎo)航欄</p> </div> </body> </html> body{ margin:0; } ul{ padding:0; margin:0; list-style-type:none; width:25%; background-color:#f1f1f1; position:fixed; height:100%; top:0; overflow:auto; /* border:1px solid #000; */ } /* ul>li:not(:last-child){ border-bottom:1px solid #000; } */ ul a{ display:block; text-decoration:none; color:#000; padding:8px 16px; text-align:center; } li a:hover:not(.active){ background-color:#555; color:white; } a.active{ background-color:#4caf50; color:white; } div{ margin-left:25%; padding:1px 16px; height:100px; }
<2>效果圖如下:
(3)水平導(dǎo)航欄
<1>代碼如下:
<!doctyre html> <html> <head> <meta charset="utf-8"> <title>水平導(dǎo)航欄</title> <link rel="stylesheet" href="daohanglan2.css"/> </head> <body> <ul> <li><a class="active" href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯(lián)系</a></li> <li style="float:right"><a href="#about">關(guān)于</a></li> </ul> <div class="box"> <h2>水平導(dǎo)航欄</h2> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> <p>水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄;水平導(dǎo)航欄</p> </div> </body> </html> body{ margin:0; } ul{ padding:0px; margin:0px; list-style-type:none; background-color:#333; overflow:hidden; position:fixed; top:0px; width:100%; } ul>li{ float:left; border-right:1px solid #fff; display:inline; } ul>li:last-child{ border-right:none; } a{ padding:14px 16px; display:block; width:60px; text-align:center; text-decoration:none; color:white; } li a:hover:not(.active) { background-color: #111; } li a.active { color: white; background-color: #4CAF50; } .box{padding:20px; margin-top:30px; background-color:#1abc9c; height:1500px;}
<2>效果圖如下:
二、下拉菜單
(1)下拉菜單的作用
下拉菜單可以使你的網(wǎng)頁不在枯燥,可以通過css改變網(wǎng)頁的美觀,這也是網(wǎng)頁排版必不可少的東西。
(2)下拉菜單
<1>代碼如下:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="xialacaidan.css"/> </head> <body> <div class="dropdown"> <span> 下拉菜單 </span> <div class="di"> <ul> <li>你好!</li> <li>我好!</li> <li>大家好!</li> </ul> </div> </div> </body> </html> body{ margin:0; text-align:center; } .dropdown{ background-color:green; text-align:center; padding:20px; display:inline-block; cursor:pointer; position:relative; } .di{ display:none; position:absolute; top:61px; left:0; } .di ul{ list-style:none; padding:0; margin:0; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .di ul li{ min-width:104px; padding:10px 15px; } .dropdown:hover{ background-color:#3e8e41 } .dropdown:hover .di{ display:block; } .di ul li:hover{ background-color: #f1f1f1 }
<2>效果圖如下
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了CSS 帶搜索導(dǎo)航欄的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2021-02-22
html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動漸變效果
這篇文章主要介紹了html+css+js實(shí)現(xiàn)導(dǎo)航欄滾動漸變效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-28css錨點(diǎn)定位被頂部固定導(dǎo)航欄遮住的解決方案
這篇文章主要介紹了css錨點(diǎn)定位被頂部固定導(dǎo)航欄遮住的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小2020-04-09- 這篇文章主要介紹了純CSS實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨效果,本文圖文并茂實(shí)例代碼詳解,給大家介紹的非常詳細(xì),需要的朋友參考下吧2019-12-09
html+css 實(shí)現(xiàn)簡易導(dǎo)航欄功能
這篇文章主要介紹了基于html+css 實(shí)現(xiàn)簡易導(dǎo)航欄功能,主要就是css(級聯(lián)樣式表)對html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2021-04-07CSS導(dǎo)航條菜單之帶小三角形的實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS導(dǎo)航條菜單之帶小三角形的實(shí)現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-22css實(shí)現(xiàn)導(dǎo)航切換的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了css實(shí)現(xiàn)導(dǎo)航切換效果,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-08-15CSS設(shè)置列表樣式和創(chuàng)建導(dǎo)航菜單實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS設(shè)置列表樣式和創(chuàng)建導(dǎo)航菜單實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-07-24純CSS + 媒體查詢實(shí)現(xiàn)網(wǎng)頁導(dǎo)航效果
這篇文章主要介紹了純CSS + 媒體查詢實(shí)現(xiàn)網(wǎng)頁導(dǎo)航效果,需要的朋友可以參考下2018-05-02- 這篇文章主要介紹了CSS3 二級導(dǎo)航的制作的示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-02