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


Posted in HTML / CSS onApril 07, 2021

Ⅰ、问题描述:

使用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+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)

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

 
HTML / CSS 相关文章推荐
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 #HTML / CSS
css3实现的加载动画效果
CSS3 天气图标动画效果
CSS3 制作精美的定价表
CSS 圆形进度栏
CSS 文字装饰 text-decoration & text-emphasis 详解
奇妙的 CSS shapes(CSS图形)
You might like
关于js和php对url编码的处理方法
2014/03/04 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
Python实现配置文件备份的方法
2015/07/30 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
nohup的用法
2014/08/10 面试题
外贸业务员求职信范文
2013/12/12 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
活动总结格式范文
2014/04/26 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
婚宴致辞
2015/07/28 职场文书
董事长秘书工作总结
2015/08/14 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技