用HTML+CSS实现导航栏悬停变色效果的代码

发布时间：2023-10-23 14:41:12 所属栏目：语言来源：

导读：关于“用HTML+CSS实现导航栏悬停变色效果的代码是什么”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需

关于“用HTML+CSS实现导航栏悬停变色效果的代码是什么”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

Ⅰ、问题描述：

使用html+css实现简易导航栏；

**要求：**将导航栏分成八个小部分，并在鼠标放上并不点击，导航栏背景颜色显示为黄绿色；

Ⅱ实现过程如下：

1、运行软件VScode，亲测可实现；

2、运行代码：

<!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盒子外边距和内边距清零，防止系统会默认值；

        有没有此语句不太影响结果；

         */

        ul {

            list-style: none;

        }

        /*

        上语句意思：将ul列表的默认样式取消；

        如果没有此语句，则结果在导航栏中很可能有小黑点；

         */

        .box {

            width: 960px;

            height: 40px;

            margin: 100px auto;

        }

        /*

        上语句意思：给div盒子定义

        宽度为960px;

        高度为40px;

        在屏幕居中，外边距为100px的居中；

         */

        .box ul {

            overflow: hidden;

        }

        /*

        上语句意思：给div盒子下的ul盒子来设置隐藏属性；

        隐藏属性作用：清除子盒子可能产生的浮动，以便按照要求设置导航栏为8个部分；

         */

        .box ul li {

            width: 120px;

            height: 40px;

            float: left;

            font-size: 18px;

            text-align: center;

            font-family: "Microsoft Yahei";

            line-height: 40px;

        }

        /*

        上语句意思：设置div盒子的ul盒子的子盒子li的属性值；

        宽度为120px;

        高度为40px;

        浮动值为靠左浮动；

        子号为18px;

        文字对齐为居中；

        文字类型为“微软雅黑”

        行高为40px;

         */

        .box ul li a {

            display: block;

            background-color: #ccc;

            color: #666;

            text-decoration: none;

        }

        /*

        上语句意思：设置div盒子的ul盒子的li盒子的子盒子li的属性值；

        " display: block;"：将行内元素变成块级元素；

        设置背景颜色为"#ccc"；

        字体颜色为"#666";

        文本修饰为无；

         */

        .box ul li a:hover {

            background-color: yellowgreen;

            color: #fff;

            font-weight: bold;

        }

        /*

        上语句意思：设置div盒子的ul盒子的li盒子的子盒子li的属性值；(设定当鼠标放在导航栏背景颜色变化值)

        变化后的背景颜色为"yellowgreen"【黄绿色】；

        变化后的字体颜色为"#fff"【白色】；

        变化后的字体粗细为"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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!