真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

使用CSS怎么實(shí)現(xiàn)一個導(dǎo)航欄和下拉菜單

這篇文章將為大家詳細(xì)講解有關(guān)使用CSS怎么實(shí)現(xiàn)一個導(dǎo)航欄和下拉菜單，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)公司是專業(yè)的酒泉網(wǎng)站建設(shè)公司，酒泉接單;提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行酒泉網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

使用CSS怎么實(shí)現(xiàn)一個導(dǎo)航欄和下拉菜單

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

使用CSS怎么實(shí)現(xiàn)一個導(dǎo)航欄和下拉菜單

二、下拉菜單

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

使用CSS怎么實(shí)現(xiàn)一個導(dǎo)航欄和下拉菜單

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

關(guān)于使用CSS怎么實(shí)現(xiàn)一個導(dǎo)航欄和下拉菜單就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。


本文標(biāo)題：使用CSS怎么實(shí)現(xiàn)一個導(dǎo)航欄和下拉菜單
文章分享：http://weahome.cn/article/pijjpp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部