Ⅰ、问题描述:

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

使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)的更多相关文章

  1. html实现随机点名器的示例代码

    此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进。<head><meta charset="UTF-8"><meta name="viewpo......

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

    Ⅰ、问题描述:使用html+css实现简易导航栏;**要求:**将导航栏分成八个小部分,并在鼠标放上并不点击,导航栏背景颜色显示为黄绿色;Ⅱ实现过程如下:1、运行软件VScode,亲测可实现;2、运行代码:<!DOCTYPE html><html lang="en&quo......

  3. select下拉框option的样式修改

    select原样式:进行样式修改后的样式: 附上修改代码://select外面必须包裹一个div,用来覆盖select原有的样式 <div class="option"><select name=""><option valu......

  4. HTML5与CSS3知识点总结

    HTML常用标签总结 手摸手带你学CSS 好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star?????????? 原文链接:https://blog.csdn.net/weixin_43461520/articl......

  5. React html中使用react的两种方式

    基本使用<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content=......

  6. input标签checkbox选中触发事件的方法

    1.方法一function checkboxOnclick(checkbox){ if ( checkbox.checked == true){ //Action for checked }else{ //Action for not checked }} 2.方法二$('#allSelect'......

  7. 如何在vue中使用HTML 5 拖放API

    拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具,使用户可以从头到尾直观地管理项目。 Trello、Pivotal Tracker 和 Jira 等工具都属于看......

  8. html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥)<!DOCTYPE html> <html> <head> <title......

  9. 利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)

    1、简单介绍在学习完HTML、CSS和一些JS后,博主也利用一些空余的时间的写了一个关于JS简单应用的Demo,主要实现的是一个Todolist(类似于记事本)的应用,可以实现数据的增、删、改、查,并且使用localStorage实现数据的本地持久化存储,具体就接着往下看吧。2、运行截图往输入框里输......

  10. 使用 React 和 Threejs 创建一个VR全景项目

    最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目实现的是加载一张 2:1 的720全景分享一下我的创建过程一、搭建框架并安装需要的插件npx create-react-app parano // 创建一个 React 项目npm install -S ty......

随机推荐

  1. Java HashMap源码分析(含散列表、红黑树、扰动函数等重点问题分析)

    Java HashMap源码分析(含散列表、红黑树、扰动函数等重点问题分析)写在最前面这个项目是从20年末就立好的 flag,经过几年的学习,回过头再去看很多知识点又有新的理解。所以趁着找实习的准备,结合以前的学习储备,创建一个主要针对应届生和初学者的 Java 开源知识项目,专注 Java 后端面......

  2. MySQL下载地址与Centos7安装MySQL以及启动问题排查

    MySQL国内镜像下载地址以及开源镜像相关站点Centos7安装MySQL启动问题(The server quit without updating PID file)解决方式目录一、MySQL国内镜像下载二、国内镜像相关站点三、Centos7安装MySQL5.71. 下载并解压至/usr/loca......

  3. R语言字符串知识点总结及实例分析

    在R语言中的单引号或双引号对中写入的任何值都被视为字符串。 R语言存储的每个字符串都在双引号内,即使是使用单引号创建的依旧如此。在字符串构造中应用的规则在字符串的开头和结尾的引号应该是两个双引号或两个单引号。它们不能被混合。双引号可以插入到以单引号开头和结尾的字符串中。单引号可以插入以双引号开头和结......

  4. 翻译 - ASP.NET Core 托管和部署 - 在 Linux 上使用 Nginx 托管 ASP.NET Core 网站

    翻译自 https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-5.0本文介绍了在 Ubuntu 16.04 服务器上设置生产环境可用的 ASP.NET Core 环境。这里......

  5. MySQL多版本并发控制——MVCC机制分析

    MVCC,即多版本并发控制(Multi-Version Concurrency Control)指的是,通过版本链维护一个数据的多个版本,使得读写操作没有冲突,可保证不同事务读写、写读操作并发执行,提高系统性能。实际上,innodb中“读已提交”和“可重复读”这两种隔离级别的事务在查询数据时访问版本......

  6. asp限制域名访问实现代码

    asp 设置只能指定域名可以使用此网站代码一 脚本之家原创<% myIp = ",127.0.0.1,localhost,www.580doc.com,"myurl= request.ServerVariables("SERVER_NAME")Respo......

  7. mysql批量新增和存储的方法实例

    登录压测时,需要很多不同的用户,此时需要向数据库新增数据#批量添加用户账号——存储过程:delimiter //drop procedure if exists test;create procedure test()beginDECLARE i int;set i = 1;while i<2......

  8. Python学习(5)(while循环语句、循环嵌套、break/continue、赋值运算符、转义字符等 )

    Python学习(5)一、python的while 循环语句二、python的赋值运算符三、python的while 循环语句 示例四、python的 break 和 continue五、python的while 嵌套1、用嵌套打印小星星2、python 九九乘法表六、python的print 函数......

  9. 用python-webdriver实现自动填表的示例代码

    在日常工作中常常需要重复填写某些表单,如果人工完成,费时费力,而且网络延迟令人十分崩溃。如果能够用程序实现自动填表,效率可以提高一倍以上,并且能够移植到多台计算机,进一步提高工作效率。webdriver是python的selenium库中的一个自动化测试工具,它能完全模拟浏览器的操作,无需处理复杂的......

  10. python requests模块的使用示例

    为什么使用requests:支持使用Cookie保持会话支持文件上传支持自动确定响应内容的编码对用户来说比较人性化模拟get请求:获取token# 使用微信公众平台举例get_param_dict={"grant_type":"**************",......