CSS中的導(dǎo)航欄和下拉菜單

2json 發(fā)布于2019-08-30 15:54 / 1897人閱讀

摘要：一導(dǎo)航欄導(dǎo)航欄的作用熟練使用導(dǎo)航欄，對于網(wǎng)站排版非常重要使用你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的菜單。下拉菜單代碼如下下拉菜單你好我好大家好效果圖如下眼睛累了吧，注意勞逸結(jié)合呀

一、CSS導(dǎo)航欄 （1）導(dǎo)航欄的作用

熟練使用導(dǎo)航欄，對于網(wǎng)站排版非常重要,使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。

（2）垂直導(dǎo)航欄

<1>代碼如下



     
         
        垂直導(dǎo)航欄 
        
    
    
        
            主頁
            新聞
            聯(lián)系
            關(guān)于
        
        
          垂直導(dǎo)航欄
          垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄垂直導(dǎo)航欄
          垂直導(dǎo)航欄
          垂直導(dǎo)航欄
          垂直導(dǎo)航欄
          垂直導(dǎo)航欄
          垂直導(dǎo)航欄
          垂直導(dǎo)航欄
          垂直導(dǎo)航欄
        
    

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>代碼如下：



     
         
        水平導(dǎo)航欄 
        
    
    
        
            主頁
            新聞
            聯(lián)系
            關(guān)于
        
        
            水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄；水平導(dǎo)航欄
            
    

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>代碼如下：




    
    


    






    
        
            下拉菜單
        
        
            
                你好！
                我好！
                大家好！
            
        
        
    




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>效果圖如下

眼睛累了吧，注意勞逸結(jié)合呀[-_-]

云服務(wù)器 GPU云服務(wù)器 div+css導(dǎo)航菜單下拉導(dǎo)航導(dǎo)航菜單三級導(dǎo)航菜單

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116905.html

發(fā)表評論

登陸后可評論

0條評論

2json

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 879·2023-04-25 19:17
日本vps怎么樣?日本便宜vps租用推薦

閱讀 2178·2021-09-10 11:26
CSS中的導(dǎo)航欄和下拉菜單

閱讀 1898·2019-08-30 15:54
【回顧九月份第一周】為什么你的前端工作經(jīng)驗(yàn)不值錢

閱讀 3410·2019-08-30 15:53
亞馬遜CTOWerner Vogels將出席CSS 2019，對話騰訊湯道生探討全球云安全新趨勢

閱讀 2680·2019-08-30 11:20
前端面試題收集，持續(xù)更新中

閱讀 3391·2019-08-29 15:12
[面試專題]JS異步原理(事件,隊(duì)列)

閱讀 1229·2019-08-29 13:16
Array類型

閱讀 2384·2019-08-26 12:19

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS中的導(dǎo)航欄和下拉菜單

垂直導(dǎo)航欄

水平導(dǎo)航欄

相關(guān)文章

純CSS實(shí)現(xiàn)下拉菜單導(dǎo)航

純CSS實(shí)現(xiàn)下拉菜單導(dǎo)航

**如何使用Flexbox和CSS Grid，實(shí)現(xiàn)高效布局**

CSS學(xué)習(xí)筆記(九) 界面組件之導(dǎo)航菜單

css 導(dǎo)航菜單+下拉菜單

發(fā)表評論

0條評論

2json

男|高級講師

TA的文章

tensorflow

日本vps怎么樣?日本便宜vps租用推薦