css样式之导航条(nav)

最新推荐文章于 2024-04-14 12:10:13 发布
最新推荐文章于 2024-04-14 12:10:13 发布
阅读量1.6w 收藏 34
点赞数 3
分类专栏： Html&Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangchaohpu/article/details/82356882
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*去掉ul的样式*/
        ul{
            list-style:none;
        }
        /*去掉a标签的下划线*/
        a{
            text-decoration: none;
        }
        /*设置.nav的宽高、居中显示、下边框样式*/
        .nav{
            width: 970px;
            height: 25px;
            margin: 0 auto;
            border-bottom: 2px solid #0266A3;
        }
        /*line-height: 25px;与父元素.nav的height一样，使得li居中显示*/
        .nav li{
            padding:0 15px 0 15px;
            line-height: 25px;
            float: left;
            font-size: 14px;
            font-weight: bold;
        }
        /*a标签不能继承父标签的颜色，所以需要单独设置a标签中的字体颜色*/
        .nav li a{
            color: #0266A3;
        }
        /*当鼠标移动到li标签时，背景颜色变成#0266A3*/
        .nav li:hover{
            background-color:#0266A3 ;
        }
        /*当鼠标移动到li标签时，a标签中的字体颜色变成#0266A3*/
        .nav  li:hover  a{
            color: white;
        }
    </style>
</head>
<body>
<div class="nav">
    <!--href="#":阻断a标签跳转刷新页面-->
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">百度</a></li>
        <li><a href="#">联想</a></li>
        <li><a href="#">戴尔</a></li>
    </ul>
</div>
</body>
</html>

ps: CSS中的background和background-color的区别
background可以定义背景的一切内容，包括颜色图片，图片位置

background：red  10px  5px; //设置背景颜色为红色，x方向移动10，y方向5

background：url(path);  //path为图片的路径

background-color只可以定义背景颜色

 

一名写前端的GISer
关注
  • 3
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap导航栏垂直布局_bootstrap基础快速入门-11 nav样式实现导航栏
weixin_39939276的博客
12-01 860
大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。 bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。 本节内容有动态显示效果，建议实际操作一下。 Title .row { margin-top: 10px; padding-top: 10px; marg...
js实现右键弹出自定义的菜单
HaiRong_21的博客
09-09 2450
js实现右键弹出自定义的菜单 实现的步骤：1、首先阻止右键弹出系统默认的菜单 2、自定义菜单并隐藏 3、点击右键弹出自定义菜单 4、点击桌面除菜单任意位置，菜单隐藏，点击菜单，菜单不隐藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
CSS 导航栏
梁辰兴的博客
09-20 2183
CSS导航栏是网站中一个基本的组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。CSS导航栏一般由选项列表、子选项列表和搜索框等组成。选项列表是可以点击的链接，子选项列表是鼠标滑过选项列表时出现的更详细的列表，搜索框便于用户搜索目标内容。除此之外，还可以添加LOGO等元素来增加导航栏的个性化。CSS可以设置导航栏的各种外观，包括背景色、宽度、高度、边框等，通过调整这些属性可以使得导航栏更加美观易用。
响应式导航栏不会做？看我一分钟学会制作导航栏！
最新发布
bjjgff的博客
04-14 1963
其中，导航栏作为网页的“指南针”，不仅能帮助用户快速定位所需内容，还能体现网站的整体风格和设计理念。本文将介绍如何使用HTML、CSS和JavaScript制作一个响应式导航栏，以适应不同屏幕尺寸，并提供优雅的用户体验。当屏幕宽度小于768px时，我们将隐藏导航链接、搜索框和按钮，并显示一个菜单图标。这个导航栏包括一个Logo、一个菜单图标（用于在小屏幕上展开导航栏）、导航链接、搜索框和登录注册按钮。同时，我们为不同元素定义了不同的样式，如Logo的字体大小和颜色、导航链接的悬停效果等。
CSS学习笔记04 背景
自构者的博客
11-19 384
透明背景nav { background-color: black; }.menu { background-color: transparent; }设置透明这样就使得菜单的颜色与导航栏的颜色一致背景加亮凸显文字.menu > li > a:hover { background-color: rgba(255,255,255, 0.1); }0.1代表透明度为百分之十
html基础知识
chengxuwa的博客
07-23 1164
Html可以大小写 xhtml只能用小写 Html可以不用结束 xhtml必须有结束标签 <H1>这是html大写</H1>；<h1>这是小写的html</h1>；<h1>这是html；<h1>这是xhtml</h1> Xhtml就是html的严格版 99%的语言都是写在body里面 学习html其实就是学习一堆的标签语言 标签：<div></div><p>&lt...
html5修改状态栏背景颜色,bootstrap如何更改nav导航栏颜色？
weixin_30233335的博客
06-01 6644
bootstrap是一个前端开发经常使用的HTML/CSS框架，可以快捷的做出各种效果，如弹窗、按钮、导航栏等。下面介绍bootstrap如何更改导航栏颜色。下图是代码运行的效果，将以此导航为例，讲解更改导航栏的颜色。方法步骤：1、bootstrap做的导航栏HTML页必须加载bootstrap.min.css、bootstrap.min.js才能实现导航的效果。下图是完整的代码及效果图。2、改变...
Bootstrap CSS组件之导航(nav)
08-31
Bootstrap CSS组件中的导航(nav)是前端开发中常用的一种布局元素，用于创建各种风格的导航条，包括选项卡式导航、胶囊式导航、堆叠式导航等。这些组件为用户提供了一种方便的方式来组织和展示网站或应用程序的主要...
CSS 制作网页导航条(下)
09-25
【CSS 制作网页导航条(下)】这篇文章主要介绍了如何使用CSS来创建一个功能完备的网页导航条，包括添加链接、调整文字样式以及实现鼠标悬停时的交互效果。以下是对文章内容的详细说明： 1. **添加链接**： - 在HTML...
Bootstrap CSS组件之导航条(navbar)
08-31
Bootstrap CSS组件中的导航条(navbar)是Web开发中常用的一个元素，它提供了高效且美观的导航界面。在Bootstrap框架中，导航条主要用于构建网站或应用的主要导航区域，它支持响应式设计，能在不同设备和屏幕尺寸下...
css3滑动导航条鼠标悬停高亮显示
11-19
在创建滑动导航条时，通常会使用`<ul>`和`<li>`元素来构建菜单项，然后通过CSS来控制它们的样式。CSS3的新选择器如`:hover`、`:active`和`:focus`可以帮助我们实现鼠标悬停、点击和焦点时的动态效果。 1. **伪类...
三种不同样式的导航nav编写
10-24
简易的三种导航栏样式及代码，小白一学就会，通俗易懂
CSS导航条nav简单样式
weixin_30892763的博客
08-27 880
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>CSSTest</title> 7 <style type="text/css"> 8 ...
纯CSS设置下拉菜单
XD
12-27 1366
<div class="nav"> <ul> <li> <a href="">nav item</a> <ul> <li><a href="">nav it...
Bootstrap 导航/滑动门（nav）
weixin_44543412的博客
05-28 3792
Bootstrap 导航/滑动门（nav） 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年5 月27 日 .nav导航/滑动门(nav) 1、基本导航样式 Bootstrap中提供的导航可共享通用标记和样式，从基础.nav样式类到活动与禁用状态。交换class选择符以在每种样式之间切换。 基础.nav组件采用Flexbox弹性布局构建，并为构建所有类型的导航...
jQuery选择器
Orange_Sheep的博客
07-22 121
<div class="nav"> <p>儿子</p> <div> <p>孙子</p> </div> </div> <script src="js/jquery.min.js"></script> <script> $(".nav>p").css("background","pink")...
导航栏里面的li标签和a标签的配合使用
weixin_30555753的博客
03-17 610
导航栏里面的li标签和a标签的配合使用 .nav li { float: left; } .nav li a { display: inline-block; font-size: 12px; line-height: 50px; /* 通过行高来撑开盒子height a就不用再设置 height:50px 了 */ padding: 0...
nav标签使用说明
weixin_33827965的博客
03-15 9846
一、html nav标签语法与结构 - TOP 1、基本语法 <nav>内容</nav> 2、nav加id <navid=”abc”>内容</nav> 3、nav加class <navclass=”abc”>内容</nav> 4、nav标签快速理解掌握Nav是与导航相关的...
CSS样式中的 nav ul li ul 与 nav>ul>li
paullinjie的博客
04-26 8512
问题：CSS样式中的 nav ul li ul 与 nav>ul>li 这两种写法的区别是什么，“>”的作用是什么，谢谢。 style> *{ margin:0; padding:0; list-style:none; } nav ul li ul{
css导航条背景颜色翻转
09-27
### 回答1： 你想要实现导航条背景颜色翻转，我理解的是当鼠标悬停在导航栏某个选项上时，该选项的背景颜色会发生翻转。如果我理解错误，请告诉我。 要实现这个效果，你可以使用CSS中的:hover伪类和transform属性。具体步骤如下： 1. 首先，为每个导航选项创建一个类名，例如.nav-item。 2. 在CSS中，为.nav-item类设置基本的样式，包括背景颜色、字体颜色、字号等。 3. 使用:hover伪类，为.nav-item类添加一个新的样式，用于鼠标悬停时的状态。 4. 在:hover样式中，使用transform属性来翻转背景颜色。例如，可以使用rotateY(180deg)将背景颜色沿着Y轴翻转180度。 下面是示例代码： ``` .nav-item { background-color: #ccc; color: #fff; font-size: 16px; padding: 10px; text-align: center; transition: transform 0.5s ease; } .nav-item:hover { transform: rotateY(180deg); } ``` 在上面的代码中，当鼠标悬停在.nav-item元素上时，它的背景颜色会沿着Y轴翻转180度。你可以根据自己的需要修改样式和转换属性来实现不同的效果。 ### 回答2： 要使CSS导航条的背景颜色翻转，可以通过以下步骤来实现。 首先，我们需要定义一个带有样式的导航条。比如： ```html <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> ``` 接下来，我们可以使用CSS来定义导航条的样式。假设默认的背景颜色为红色，翻转后的背景颜色为蓝色。可以这样实现： ```css nav { background-color: red; } nav ul { display: flex; list-style: none; padding: 0; margin: 0; } nav li { margin-right: 10px; } nav li:last-child { margin-right: 0; } nav a { color: white; text-decoration: none; padding: 5px; } nav a:hover { background-color: blue; } ``` 在上述示例中，我们给导航条设置了红色的背景颜色。使用CSS的伪类选择器:hover来定义鼠标悬停时导航条的背景颜色。当鼠标悬停在导航链接上时，背景颜色将变为蓝色。 通过这种方式，我们可以实现导航条背景颜色的翻转效果。 ### 回答3： 在CSS中，可以通过一些简单的代码来实现导航条背景颜色的翻转。首先，我们需要定义一个样式类来设置导航条的背景颜色。例如，我们可以命名该样式类为“nav-bg”。 在“nav-bg”样式类中，可以通过设置background-color属性来定义导航条的背景颜色。比如，我们可以将背景颜色设置为蓝色（blue）。 接下来，我们可以在导航条的HTML代码中使用“nav-bg”样式类来应用导航条的背景颜色。可以使用class属性来指定样式类的名称。例如：<ul class="nav-bg">...</ul> 如果我们想要实现导航条背景颜色的翻转效果，可以使用CSS中的伪类选择器来实现。我们可以使用:hover伪类选择器来定义当鼠标悬停在导航条上时的样式。例如，可以设置鼠标悬停时的背景颜色为红色（red）。 通过以上的代码设置，当我们将鼠标悬停在导航条上时，背景颜色将从蓝色翻转为红色，从而实现了导航条背景颜色的翻转效果。 需要注意的是，以上代码仅示意如何实现导航条背景颜色的翻转，具体的实现方式可能会因不同的项目而有所不同。可以根据具体的需求和网站设计进行相应的调整和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值