导航条

最新推荐文章于 2022-06-11 20:59:54 发布
最新推荐文章于 2022-06-11 20:59:54 发布
阅读量418 收藏
点赞数
分类专栏： css 文章标签： 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oHayHay/article/details/51901829
版权

这里写图片描述

<!-- 导航菜单---垂直菜单 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>垂直菜单</title>
    <style type="text/css">
    body{margin:0; padding: 0;font-size: 14px}
    ul{list-style: none;width: 100px}/*把条目前面的点清除掉*/

    a{text-decoration: none;display: block;width: 100px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-indent: 10px;}
    a:hover{background-color: #EAAB39;color: #fff}
    </style>
</head>
<body>
<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>
</ul>>
</body>
</html>
![这里写图片描述](https://img-blog.csdn.net/20160713214346858)
<!-- 导航菜单---水平菜单 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>水平菜单</title>
    <style type="text/css">
    body{margin:0; padding: 0;font-size: 14px}
    ul{list-style: none;}/*把条目前面的点清除掉*/
    li{float: left;}
    a{text-decoration: none;display: block;width: 100px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-align:center}
    a:hover{background-color: #EAAB39;color: #fff}
    </style>
</head>
<body>
<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>
</ul>
</body>
</html>
![这里写图片描述](https://img-blog.csdn.net/20160713214420155)
<!-- 导航菜单---伸缩菜单(改变高度) -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>伸缩菜单</title>
    <style type="text/css">
    body{margin:0; padding: 0;font-size: 14px}
    ul{list-style: none;height:50px;border-bottom: 5px solid #f60;padding-left: 30px}/*把条目前面的点清除掉*/
    li{float: left;margin-top: 20px}
    a{text-decoration: none;display: block;width: 120px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-align:center;}
    .on,a:hover{color: #fff;background-color: #f60;height: 40px;margin-top: -10px;line-height: 40px}
    </style>
</head>
<body>
<ul>
    <li><a class="on" 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>
![这里写图片描述](https://img-blog.csdn.net/20160713214434625)
<!-- 导航菜单---圆角菜单 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>圆角菜单</title>
    <style type="text/css">
    body{margin:0; padding: 0;font-size: 14px}
    ul{list-style: none;height:50px;border-bottom: 5px solid #f60;padding-left: 30px}/*把条目前面的点清除掉*/
    li{float: left;margin-top: 20px}
    a{text-decoration: none;display: block;width: 120px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-align:center;background:url(btnBg.png);}
    .on,a:hover{color: #fff;background-position: 0 -30px}
    </style>
</head>
<body>
<ul>
    <li><a class="on" 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>
![这里写图片描述](https://img-blog.csdn.net/20160713214446139)
<!-- 导航菜单---伸缩菜单(水平方向) -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>伸缩菜单</title>
<style type="text/css">
    body{margin:0; padding: 0;font-size: 14px}
    ul{list-style: none;height:50px;border-bottom: 5px solid #f60;padding-left: 30px}/*把条目前面的点清除掉*/
    li{float: left;margin-top: 20px}
    a{text-decoration: none;display: block;width: 120px;line-height: 30px;height: 30px;background-color: #9C9595;margin-bottom: 1px;text-align:center;}
    .on,a:hover{color: #fff;background-color: #f60;height: 30px;line-height: 30px}
</style>
<script type="text/javascript">
    window.onload=function(){
        var aA=document.getElementsByTagName('a');
        for (var i=0; i <=aA.length; i++) {
            aA[i].onmouseover=function(){ 
                clearInterval(this.time);
                var This=this;
                This.time=setInterval(function(){
                    This.style.width=This.offsetWidth+8+"px";
                    if(This.offsetWidth>=160){
                        clearInterval(This.time);
                    }
                },30);
            };


            aA[i].onmouseout=function(){     
                clearInterval(this.time);
                var This=this;
                This.time=setInterval(function(){
                    This.style.width=This.offsetWidth-8+"px";
                    if(This.offsetWidth<=120){
                        This.style.width="120px";
                        clearInterval(This.time);
                    }
                },30);
            };
        }
    };
</script>
</head>
<body>
<ul>
    <li><a class="on" 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>
![这里写图片描述](https://img-blog.csdn.net/20160713214500454)
oHayHay
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
横条导航窗体html代码,各式各样的导航条效果css3结合jquery代码实现
weixin_29098391的博客
06-09 3034
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
html导航条布局,div+css菜单导航条布局自适应宽度
weixin_42362146的博客
06-07 2008
特效描述：div+css菜单 导航条布局 自适应宽度。div+css布局制作导航菜单，设置导航条自适应宽度效果，导航匹配自定义宽度大小。代码结构1. HTML代码*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}.demo{width:645px;margin:50px auto;}/* navbox */.navbox{heig...
Bootstrap导航条
歪脖先生的博客
05-19 7077
导航条 Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。 Bootstrap 对基本导航条进行了一些扩展，除了站点名称和导航链接外，还可以在导航条中添加表单、按钮、下拉菜单、文本、非导航链接等。 创建导航...
Bootstrap固定导航条
歪脖先生的博客
05-20 5135
固定导航条 默认情况下，导航条的定位属性为 static，它的位置由它的HTML代码中定义的顺序出现，并随着页面向下滚动。 很多时候，我们却希望导航条固定在浏览器窗口的顶部或底部，这种固定导航条的应用在移动端尤为常见。 1、固定在顶部 如果想让导航条固定在顶部，只需在 .navbar 类追加一个 .navbar-fixed-top 类即可。还可以在导航条内部包含一个.container或....
Bootstrap 反色导航条
歪脖先生的博客
05-20 1085
反色导航条 只需为 .navbar 类追加一个 .navbar-inverse 类，就能创建出反色效果导航条，即黑底白字的导航条。如： <navclass="navbar navbar-inverse"> ... </nav> 效果如图 3‑55所示： 图3-55 反色导航条 关于作者 歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTM...
横向导航条页面居中的方法
热门推荐
Milk_o3o的博客
07-22 1万+
实现图中效果，使横向导航条页面居中
html和css实现导航条
沃和莱特的博客
06-11 4121
当我们在浏览网页时，常常能发现各种导航条，这些小小的导航条可以很大的方便我们更好的获取我们想得到的信息，就拿百度中的一个导航条做例子，简单做一个仿照版的吧~
导航条制作
syy1292的博客
03-07 2211
导航条一般分为两种：一种为竖向导航条，即为竖向的；一种为横向导航条，即为横向的！例子如下： 横向导航条例子： 竖向导航条例子： 横向导航栏和竖向导航栏就在于它的展示状态，一般做好之后默认的就是竖向的，若要变横向的，只需在css中nav ul li 样式里面加入display: inline-block; 即可 基本代码如下： html代码: <!doctype html...
bootstrap 导航条居中
qq_40463625的博客
10-08 4208
为了实现bootstrap导航条里面的导航按钮居中，并响应小屏幕，着实折腾了一波，。记录一下： 1：.navbar-collapse 设置 文字居中 text-align: center; 2：导航容器 .navbar-nav，设置为行内块元素 display: inline-block; 3：导航选项 li， 设置为块元素 display: block; <nav class="navbar navbar-default navbar-inverse navbar-fixed-top nav-ju
Bootstrap 响应式导航条
歪脖先生的博客
03-10 3392
响应式导航条响应式导航条能够根据浏览器窗口宽度，自动调整导航条的显示状态。一般会为响应式导航提供一个导航条和一个按钮。当浏览器窗口足够宽时，正常显示导航条而不显示按钮。当浏览器窗口宽度缩小到一定程度时，自动隐藏导航条并显示按钮。此时，用户点击按钮，隐藏的导航条就会显示出来。要使用Bootstrap中的响应式导航条，需要把导航条放在 .nav-collapse.collapse 的容器中，并添加一个...
BootStrap 导航条实例代码
08-30
Bootstrap 导航条实例代码详解 Bootstrap 是一个流行的前端框架，提供了许多实用的组件和插件，其中导航条是其中一个非常重要的组件。本文将详细介绍 Bootstrap 导航条的实例代码，包括默认的导航条和带有表单的...
简易导航条制作
09-12
在网页设计中，导航条（Navigation Bar）是一个至关重要的元素，它帮助用户在网站的不同页面之间轻松跳转，提供良好的用户体验。本教程将探讨如何创建一个简易的导航条，你可以通过查看提供的网页源代码来进一步了解...
JQ滑动变色菜单_导航条变色滑动显示
10-31
"JQ滑动变色菜单_导航条变色滑动显示"就是一个这样的实践，它利用jQuery库来实现导航条在用户滚动页面时的动态变化，特别是颜色的变换，为网站增添视觉吸引力和互动性。jQuery（简称JQ）是一个广泛使用的JavaScript...
导航条_水平2
05-10
在网页设计中，导航条是页面布局的重要组成部分，它为用户提供了一个直观的界面来浏览网站的不同部分。"导航条_水平2"这个主题主要聚焦于水平布局的导航条设计，这是最常见的网页导航形式，适用于大部分网站，特别是...
weixin.zip_导航条
09-24
在安卓应用开发中，导航条（Navigation Bar）是用户界面中的关键组成部分，它通常位于屏幕底部，用于展示各个主要功能模块的入口，帮助用户轻松地在应用的不同页面间切换。"weixin.zip_导航条"这个压缩包可能包含了...
京东商城导航logo---用css
oHayHay的博客
07-13 2542
<!-- 纯css实现导航样式 --> <!DOCTYPE html> <html> <head> <title>京东css</title> <meta charset="utf-8"> <style type="text/css"> body{ padding:0; font-size:10pt; behavior：u
各种布局（一列，二列，三列，混合布局）
oHayHay的博客
07-13 734
<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>一列布局</title> <style type="text/css"> body{margin:0; padding: 0} .head{height: 80px;background-color: red;} .ma
position属性
oHayHay的博客
07-13 538
//相对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>相对定位</title> <style type="text/css"> body{margin:0; padding: 0} .box1{background-color: red;height: 80px;po
HBuilderX导航条
最新发布
04-13
在HBuilderX中，导航条是一个非常实用的功能，它可以帮助开发者快速导航到代码中的特定位置。 HBuilderX的导航条位于编辑器的顶部，它显示了当前文件的结构和层次关系。通过导航条，你可以快速定位到文件中的类、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值