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

資訊專欄INFORMATION COLUMN

CSS中的導航欄和下拉菜單

2json / 1905人閱讀

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

一、CSS導航欄 （1）導航欄的作用

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

（2）垂直導航欄

<1>代碼如下



     
         
        垂直導航欄 
        
    
    
        
        

          
垂直導航欄

          
垂直導航欄垂直導航欄垂直導航欄垂直導航欄垂直導航欄垂直導航欄垂直導航欄

          
垂直導航欄

          
垂直導航欄

          
垂直導航欄

          
垂直導航欄

          
垂直導航欄

          
垂直導航欄

          
垂直導航欄

        

    

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）水平導航欄

<1>代碼如下：



     
         
        水平導航欄 
        
    
    
        
        

            
水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            
水平導航欄；水平導航欄；水平導航欄；水平導航欄

            

    

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）下拉菜單的作用

下拉菜單可以使你的網頁不在枯燥，可以通過css改變網頁的美觀，這也是網頁排版必不可少的東西。

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116905.html

相關文章

  • 純CSS實現下拉菜單導航

    摘要：需求當鼠標到按鈕上時，出現下拉菜單導航條。設置是，默認寬度為內容寬度，則鼠標只會在到按鈕區域時才會展開下拉菜單以上是我的一些想法以及實現，如有錯誤之處，歡迎各位前端大神留言評論拍磚。 前言：本題是網易云課堂的前端微專業《頁面制作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有回響，在學校圖書館花了幾個小時做出來并對相關知識點進行了總結，寫了這篇博文...

    bingo 評論0 收藏0

  • 純CSS實現下拉菜單導航

    摘要：需求當鼠標到按鈕上時，出現下拉菜單導航條。設置是，默認寬度為內容寬度，則鼠標只會在到按鈕區域時才會展開下拉菜單以上是我的一些想法以及實現，如有錯誤之處，歡迎各位前端大神留言評論拍磚。 前言：本題是網易云課堂的前端微專業《頁面制作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有回響，在學校圖書館花了幾個小時做出來并對相關知識點進行了總結，寫了這篇博文...

    wapeyang 評論0 收藏0

  • 如何使用Flexbox和CSS Grid，實現高效布局

    摘要：代碼如下頁面內容樣式接下來，將側邊欄和主內容區域使用一個包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結束值位于同一行上，并用斜杠分隔。設計方法總結以上的布局設計中，使用了來進行整體布局以及設計中的非線性部分。 CSS 浮動屬性一直是網站上排列元素的主要方法之一，但是當實現復雜布局時，這種方法不總是那么理想。幸運的是，在現代網頁設計時代，使用 Flexbox 和 CSS...

    eternalshallow 評論0 收藏0

  • CSS學習筆記(九) 界面組件之導航菜單

    摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結果會導致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。 菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下，由于列表（li）是塊級元素...

    pingink 評論0 收藏0

  • css 導航菜單+下拉菜單

    摘要：一導航菜單橫向導航代碼如下橫向導航菜單首頁新聞聯系關于效果圖豎向導航代碼如下首頁新聞聯系關于效果圖二下拉菜單和切換實現代碼如下下拉菜單你好我好大家好效果圖持續更新，歡迎各位指教 一、導航菜單 1.橫向導航 代碼如下： 橫向導航菜單 body{ margin:0; } ul{ ...

    W4n9Hu1 評論0 收藏0

發表評論

0條評論

2json

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<