欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

創(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)航欄，對(duì)于網(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>
          <h3>垂直導(dǎo)航欄</h3>
          <h4>垂直導(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>效果圖如下：

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

（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">
            <h3>水平導(dǎo)航欄</h3>
            <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>效果圖如下：

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

二、下拉菜單

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

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

css的選擇器有哪些

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

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

本文名稱：使用CSS怎么實(shí)現(xiàn)一個(gè)導(dǎo)航欄和下拉菜單
URL網(wǎng)址：http://chinadenli.net/article38/pijjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站營銷、企業(yè)建站、定制開發(fā)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司