当前位置: 萬仟网 > IT编程>网页制作>HTML > 使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)

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

2021年04月07日  | 萬仟网IT编程  | 我要评论
ⅰ、问题描述:使用html+css实现简易导航栏;**要求:**将导航栏分成八个小部分,并在鼠标放上并不点击,导航栏背景颜色显示为黄绿色;ⅱ实现过程如下:1、运行软件vscode,亲测可实现;2、运行

ⅰ、问题描述:

使用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 导航栏内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com