使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)

发布时间：2021-04-07 15:46:39 作者：qwq hui qwq

这篇文章主要介绍了使用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>

3、结果展示：
放鼠标之前：

在这里插入图片描述

当鼠标放在导航栏第一个“首页”之后：

在这里插入图片描述

到此这篇关于使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)的文章就介绍到这了,更多相关html 导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

Tag：导航栏 css HTML

使用HTML+Css+transform实现3D导航栏的示例代码
这篇文章主要介绍了使用HTML+Css+transform实现3D导航栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着
2021-03-31
html+css+js实现导航栏滚动渐变效果
这篇文章主要介绍了html+css+js实现导航栏滚动渐变效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-28
Html5导航栏吸顶方案原理与对比实现
这篇文章主要介绍了Html5导航栏吸顶方案原理与对比实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
2020-06-10
html5 横向滑动导航栏的方法示例
这篇文章主要介绍了html5 横向滑动导航栏的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
2020-05-08
html+css 实现简易导航栏功能
这篇文章主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
2021-04-07
基于html和CSS3制作简单侧边导航栏
本篇文章给大家分享基于html和CSS3制作简单侧边导航栏，效果简单大方，需要的朋友可以从参考下
2016-02-25
基于html和CSS3制作酷炫的导航栏
本篇文章给大家分享基于html和CSS3制作酷炫的导航栏，效果非常美观，需要的朋友可以从参考下
2015-09-23