10种导航栏

最新推荐文章于 2024-06-26 20:20:57 发布
最新推荐文章于 2024-06-26 20:20:57 发布
阅读量248 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35254240/article/details/89764363
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-family:"微软雅黑";}
ul,li{list-style:none;}
a{text-decoration:none; color:#333;}
.nav1{width:980px; height:54px; border-bottom:2px solid #b30909; margin:0 auto; background:url(images/img01.jpg);}
.nav1 li{float:left; line-height:54px; background:url(images/img02.jpg) no-repeat right top;}
.nav1 li a{padding:0 20px; color:#fff; display:block; height:54px;}
.nav1 li a:hover{background:url(images/img03.jpg);}
/*-----------------*/
.nav2{width:980px; height:44px; margin:20px auto; background:url(images/img04.jpg) repeat-x left bottom;}
.nav2 li{float:left;  }
.nav2 li a{color:#666; font-weight:bold; padding:0 18px;line-height:48px;}
.nav2 li a:hover{height:44px; background:url(images/img05.jpg); display:block; line-height:44px; color:#fff;}

/*-----------------*/

.nav3{width:980px; margin:20px auto; height:40px; border-bottom:1px solid #666;  }
.nav3 li{float:left; margin-right:9px;}
.nav3 li a{background:#f7f7f7; border:1px solid #cecece; height:35px; padding:0 14px; display:block; border-bottom:none; margin-top:4px; }
.nav3 li a:hover{height:40px; background:#fff; margin-top:0; border-color:#666;}

/*-----------------*/
.nav4{width:980px; margin:20px auto; background:url(images/img06.jpg); height:53px;}
.nav4 li{float:left; }
.nav4 li a{ display:block;}
.nav4 li a:hover{background:url(images/img07.jpg); height:53px;}
.nav4 li a span{height:47px;padding:0 28px; display:block;border-right:1px solid #ccc;}
.nav5{width:980px; margin:20px auto; background:#F66; height:30px;}
.nav5 li{border-right:1px solid #000; float:left;}
.nav5 li a{width:80px; font-size:12px; height:30px; line-height:30px; text-align:center; display:block;}
.nav5 li a i{display:none; font-style:normal;}
.nav5 li a:hover i{display:block;}
.nav5 li a:hover span{display:none;}


/*-----------------*/
.nav6{width:980px; height:36px; margin:20px auto; }
.nav6 li{float:left;}
.nav6 li a{height:32px; border-top:1px solid #426d90;border-bottom:1px solid #426d90; display:block; background:#2175bd; color:#fff; font-size:12px; line-height:32px; padding:0 10px; margin-top:2px;}
.nav6 li a:hover{height:34px; background:#2386d9; margin-top:0;}

/*-----------------*/
.nav7{width:980px; height:53px; margin:20px auto; background:url(images/img06.jpg);}
.nav7 li{float:left; line-height:53px;}
.nav7 li a{display:block;}
.nav7 li a span{padding:0 25px; height:48px; border-right:1px solid #e7e7e7; display:block; }
.nav7 li a:hover{border-bottom:5px solid #fff; display:block;}

/*-----------------*/
.nav8{width:980px; height:32px; margin:20px auto; background:#9a0000;}
.nav8 li{float:left; line-height:32px;}
.nav8 li a{color:#fff; display:block; }
.nav8 li a span{padding:0 15px;display:block; height:32px;}
.nav8 li a:hover{background:url(images/img08.jpg); color:#f00; border-left:1px solid #d8d9db;border-right:1px solid #d8d9db;}
.nav8 li a:hover span{background:url(images/img09.jpg) no-repeat center 3px;}
/*-----------------*/
.nav9{width:980px; height:35px; margin:20px auto; background:#9c0000;}
.nav9 li{float:left; line-height:35px; margin-left:1px; border-right:1px solid #000;}
.nav9 li a{background:#F90; border-top:4px solid #fff; height:28px; display:block; padding:0 27px;}
.nav9 li a:hover{ background:#000; color:#ff0; border-top:4px solid #9c0000;}


.nav10{width:980px; height:20px; margin:20px auto; background:#dfdfdf; border-bottom:8px solid #df4c16;}
.nav10 li{float:left; line-height:18px; width:80px; text-align:center; border-right:1px solid #fff; }
.nav10 li a{font-size:12px; color:#666;}
em{font-style:normal;}

.nav10 li a em{display:none;}
.nav10 li a:hover em{display:block;}
.nav10 li a:hover span{display:none;}
</style>
</head>

<body>
<ul class="nav10">
	<li><a href="#"><span>home</span><em>首页</em></a></li>
    <li><a href="#"><span>home</span><em>首页</em></a></li>
    <li><a href="#"><span>home</span><em>首页</em></a></li>
    <li><a href="#"><span>home</span><em>首页</em></a></li>
    <li><a href="#"><span>home</span><em>首页</em></a></li>
    <li><a href="#"><span>home</span><em>首页</em></a></li>
    <li><a href="#"><span>home</span><em>首页</em></a></li>
</ul>

<ul class="nav9">
	<li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>

<li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>

<li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>

<li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>


</ul>




<ul class="nav8">
	<li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>

</ul>



<ul class="nav7">
	<li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>

</ul>





<ul class="nav5">
	<li><a href="#"><span>Home</span><i>首页</i></a></li>
    <li><a href="#"><span>Home</span><i>首页</i></a></li>
    <li><a href="#"><span>Home</span><i>首页</i></a></li>
    <li><a href="#"><span>Home</span><i>首页</i></a></li>
    <li><a href="#"><span>Home</span><i>首页</i></a></li>

</ul>

<ul class="nav1">
	<li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>   
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
</ul>

<ul class="nav2">
	<li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
</ul>


<ul class="nav3">
	<li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">about us</a></li>
</ul>

<ul class="nav4">
	<li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>about us</span></a></li>

</ul>

<ul class="nav6">
	<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>
    <li><a href="#">关于你们</a></li>
</ul>


</body>
</html>

 

甘乐2333
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
导航条大全。来了来了
09-28
导航大全，不用你动手，为你开发提供更多方便
多种导航栏样式
筷子
09-15 359
#nav{  width: 9em;  margin:0 auto;  font-size:14px;     border:solid 1px #aaa; } #nav a{  display:block;  text-decoration:none;  color:#000;  height:2.4em;  border:0.4em solid #aaa; } #na
导航栏设计的5种类型，新手不容忽视的重要知识！
最新发布
sky768872的博客
06-26 729
导航栏是网页设计中不可缺少的一部分。大多数用户在浏览网页时都是从导航栏开始的。导航栏的作用相当于路标和书籍中的目录，其重要性不言而喻。从设计的角度来看，网页导航栏的设计功能大于视觉效果。因此，网页导航栏的设计可以分为 5 类型，方便不同场景使用。下面为大家整理了一下。5 网页导航栏设计的介绍和案例，喜欢的小伙伴可以一键复制使用。
导航栏的多种滚动
weixin_30510153的博客
12-27 100
参考网址：http://blog.csdn.net/chenyulearn/article/details/19606751 转载于:https://www.cnblogs.com/flyingLcode/p/8127706.html
经典的nav导航
weixin_30739595的博客
10-25 246
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <nav> <ul> ...
rn 多种导航栏搭配使用
weixin_43294560的博客
08-24 400
因为一个组件中只能设置一个导航栏 (1)在App.js中设置Stack栈导航栏,设置所有通过this.props.navigate导航的路由和默认路由 (2)在栈导航的路由中,设置底部导航栏/顶部导航栏,然后再配置相应路由
易语言导航栏
08-21
"易语言导航栏源码"是一个专门用于实现导航栏功能的代码资源，通过这个源码，开发者可以学习到如何在易语言中创建和管理导航栏。下面将详细解析其中涉及的关键知识点： 1. **创建组件**：在易语言中，创建组件是指...
十几种 网页导航栏
04-30
在本主题中，我们将深入探讨“十几种网页导航栏”的设计、实现方式以及相关的HTML、CSS和JavaScript技术。 首先，让我们从HTML结构说起。一个基本的导航栏通常由`<nav>`元素包裹，其中包含一系列的链接，如`<a>`...
vue实现nav导航栏的方法
08-28
vue实现nav导航栏的方法 vue实现nav导航栏的方法是指在vue项目中实现导航栏的方法。导航栏是每一个网页项目都少不了的组件，每一个项目都需要实现导航栏的功能。通过原始的方法基本上都是可以写出来的。但是要写出...
Qt - 导航栏的实现
02-26
在Qt框架中，导航栏（通常称为ToolBar或NavBar）是一种常用的设计元素，它提供了一种直观的方式来展示和访问应用程序的主要功能。这篇博文的作者通过个人的实践，分享了如何在Qt中实现一个导航栏，虽然可能是一份...
响应式导航栏.zip
06-05
响应式导航栏是一种设计模式，它能够根据用户设备的不同屏幕尺寸和方向自动调整布局和功能，从而提供良好的用户体验。在现代网页开发中，响应式设计是必不可少的，特别是在多设备浏览已经成为常态的情况下。本项目...
html导航菜单栏
06-08
风格朴素漂亮的html模板 黑色的水平导航菜单 菜单项弹出显示
导航栏设计与实现
m0_71347172的博客
03-22 454
先来看导航栏效果，当我们点击导航栏时会进入对应界面，比如点击服装，就会仅展示服装类的内容，电器展示电器类的内容。注意点：<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。再来看js中的代码，通过wx.requext向lists接口获取导航栏的数据。导航栏分类之后，将高亮显示红色并带着参数classid访问list接口。今日在第二大学远程实习，想分享一下导航栏的制作。先来看wxml中的代码。
导航栏样式
y4418的博客
06-08 763
本周的话就分享一下这个导航栏。 1.导航栏需要使用.navbar 来定义，并使用 用于响应式布局以及使用配色方案Class 。 2.导航栏默认内容是流式的，使用 containers容喇来限制它们的水平宽度。使用我们提供的 间隙间距 和 flex 布局 classes 来定义导航栏中元素的间距和对齐。 3.Navbars导航栏默认支持响应式，在修改上也很容易，你可以使用轻松的来定义它们-这取决于我们提供的 JavaScript 插件。 4.打印时，导航栏默认隐藏。如果需要打印显示，可以加入.d-print
超实用！网站导航栏设计方法总结
热门推荐
qq_40543535的博客
12-28 3万+
导航对于一个网站来说，起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ，让用户清晰明了的了解到网站的结构框架，起到重要的指引作用。下面跟大家分享下常用的几种网页导航形式： 1、顶部导航 顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需。顶部导航这样的设计形式保守但目的性强，可以确保组织结构的可靠和降低用户寻找的时间成本。但这类导航有个缺点，
csdn写博客怎么添加导航目录栏
共勉
01-03 694
很多人不知道如何让添加导航目录，如下图 使用使用文章目录1234567[toc] 123 111111111111111111111111111111111111111111111111111111111111111111111111111 22222222222222222 333333333333 44444444444444 555555555555555 6666666666666 45...
组件实战（一）——导航栏设计
CSDN_Yong的博客
03-06 555
简介 常见导航栏的设计与封装，以及一些知识点的记录。为了避免组件太细不好管理，这里的导航栏包括了logo以及导航菜单等等。 功能详解 导航栏是黏性的，也就是拖动到下方时，导航栏会fix在顶部。 其次，导航栏是自适应的，当界面不适合时会折叠，靠按钮展开。 效果 固定时，折叠与未折叠 非固定时，折叠与未折叠 展开时： 代码 <template> <header :cl...
导航栏切换效果
lishundi的博客
08-04 4047
在网页中经常会遇到导航栏切换效果，也就是鼠标放到某一导航栏上，底下对应的内容就会发生变化．下面说一下实现思路： 首先说下this的用法： this在事件中指向的是事件源对象，来看下面这段代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;
导航栏的介绍
肖岩
05-02 1827
一、导航栏的创建：         PhoneStatusBar --&gt;makeStatusBarView();          try { boolean showNav = mWindowManagerService.hasNavigationBar();//向wms询问是否需要导航栏 //if (DEBUG) Log.v(TA...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值