使用Html+Css實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄功能(導(dǎo)航欄遇到鼠標(biāo)切換背景顏色)

發(fā)布時(shí)間：2021-04-07 15:46:39 作者：qwq hui qwq

這篇文章主要介紹了使用Html+Css實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄功能(導(dǎo)航欄遇到鼠標(biāo)切換背景顏色),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Ⅰ、問題描述：

使用html+css實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄；
**要求：**將導(dǎo)航欄分成八個(gè)小部分，并在鼠標(biāo)放上并不點(diǎn)擊，導(dǎo)航欄背景顏色顯示為黃綠色；

Ⅱ?qū)崿F(xiàn)過程如下：

1、運(yùn)行軟件VScode，親測(cè)可實(shí)現(xiàn)；
2、運(yùn)行代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        /* 
        上語句意思：將div盒子外邊距和內(nèi)邊距清零，防止系統(tǒng)會(huì)默認(rèn)值；
        有沒有此語句不太影響結(jié)果；
         */
        ul {
            list-style: none;
        }
        /* 
        上語句意思：將ul列表的默認(rèn)樣式取消；
        如果沒有此語句，則結(jié)果在導(dǎo)航欄中很可能有小黑點(diǎn)；
         */
        .box {
            width: 960px;
            height: 40px;
            margin: 100px auto;
        }
        /* 
        上語句意思：給div盒子定義
        寬度為960px;
        高度為40px;
        在屏幕居中，外邊距為100px的居中；
         */
        .box ul {
            overflow: hidden;
        }
        /* 
        上語句意思：給div盒子下的ul盒子來設(shè)置隱藏屬性；
        隱藏屬性作用：清除子盒子可能產(chǎn)生的浮動(dòng)，以便按照要求設(shè)置導(dǎo)航欄為8個(gè)部分；
         */
        .box ul li {
            width: 120px;
            height: 40px;
            float: left;
            font-size: 18px;
            text-align: center;
            font-family: "Microsoft Yahei";
            line-height: 40px;
        }
        /* 
        上語句意思：設(shè)置div盒子的ul盒子的子盒子li的屬性值；
        寬度為120px;
        高度為40px;
        浮動(dòng)值為靠左浮動(dòng)；
        子號(hào)為18px;
        文字對(duì)齊為居中；
        文字類型為“微軟雅黑”
        行高為40px;
         */
        .box ul li a {
            display: block;
            background-color: #ccc;
            color: #666;
            text-decoration: none;
        }
        /* 
        上語句意思：設(shè)置div盒子的ul盒子的li盒子的子盒子li的屬性值；
        " display: block;"：將行內(nèi)元素變成塊級(jí)元素；
        設(shè)置背景顏色為"#ccc"；
        字體顏色為"#666";
        文本修飾為無；
         */
        .box ul li a:hover {
            background-color: yellowgreen;
            color: #fff;
            font-weight: bold;
        }
        /* 
        上語句意思：設(shè)置div盒子的ul盒子的li盒子的子盒子li的屬性值；(設(shè)定當(dāng)鼠標(biāo)放在導(dǎo)航欄背景顏色變化值)
        變化后的背景顏色為"yellowgreen"【黃綠色】；
        變化后的字體顏色為"#fff"【白色】；
        變化后的字體粗細(xì)為"bold"【加粗】；
         */
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
            <li><a href="#">首頁</a></li>
        </ul>
    </div>
</body>
</html>

3、結(jié)果展示：
放鼠標(biāo)之前：

在這里插入圖片描述

當(dāng)鼠標(biāo)放在導(dǎo)航欄第一個(gè)“首頁”之后：

在這里插入圖片描述

到此這篇關(guān)于使用Html+Css實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄功能(導(dǎo)航欄遇到鼠標(biāo)切換背景顏色)的文章就介紹到這了,更多相關(guān)html 導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！