HTML导航栏的四种制作方法

1.首先，大家可以直接使用html5中的导航栏标签<nav></nav>

具体代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>导航栏</title></head><body><nav><a href="#">首页</a><a href="#">新闻</a><a href="#">关于我们</a></nav></body>
</html>

这是实际的效果，可以根据实际需要，去除下划线和颜色等等

2.接下来可以无序列表，去除它的默认样式设置浮动就可以了，具体的代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>ul{height: 100px;width:100%;list-style-type: none; //取消无序列表的固定样式}ul li{float:left;margin: 20px;  //设置三个元素的外间距}</style></head><body><ul><li><a href="">首页<a></li><li><a href="">新闻<a></li><li><a href="">关于我们<a></li></ul></body>
</html>

这是实际的效果图。

3.设置超链接

在这里还想说的是，<ul>的子集元素只能是<li>,不可以是别的，HTML的语义很弱，标签的使用很重要，在实际的网页开发中，不同标签的语义，权重都不一样，所以，优化也不一样。

4.可以使用bootstrap，大家可以看一下具体的代码和详细的注释。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>bootstrap的学习</title><!--导入基本样式--><link style="text/css" rel="stylesheet" href="css/bootstrap.css">  <!--导入基本样式的压缩--><link style="text/css" rel="stylesheet" href="css/bootstrap.min.css"><!--导入主题样式  注意：顺序 不可变--><link style="text/css" rel="stylesheet" href="css/bootstrap-theme.css"></head><body><!--类nav清除列表的默认样式  nav-tabs定义tabs的标题栏--><ul class="nav nav-tabs"><li><a href="#tab2" data-toggle=tab">首页</a></li><li><a href="#tab2" data-toggle=tab">关注</a></li><li><a href="#tab2" data-toggle=tab">个人中心</a></li></ul></body>
</html>

实际效果如下

HTML导航栏的四种制作方法相关推荐

HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...
Android底部导航栏的四种实现
现在大多数App都会用到底部导航栏,比如常见的聊天工具QQ.微信,购物App等等,有了底部导航栏,用户可以随时切换界面,查看不同的内容.它的实现方式也很多,以前大多使用TabHost来实现,但是现在我 ...
21天学习之二(Android 10.0 SystemUI默认去掉底部导航栏的三种方法)
活动地址:CSDN21天学习挑战赛 1.概述在定制化开发中,在SystemUI的一些定制功能中,针对默认去掉底部导航栏的方法有好几种,StatusBar和DisplayPolicy.java中api ...
关于Android系统隐藏导航栏的两种方法
关于Android系统隐藏导航栏的两种方法在NXP的imx6q和全志的A40I上试过 1.frameworks/base/core/res/res/values/dimens.xml中修改 < ...
python 图标字体_Icon-font图标字体的四类制作方法
FontAwesome经历了两年的进化,如今已成为不少工具性应用开发者的首选.但FontAwesome的图标毕竟有限,在某些特定的情景中,FontAwesome的字体并不能准确地传达合适的意义.为自己 ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
计算机演示题打不开,win7系统电脑上的ppt打不开怎么修复|ppt打不开的四种修复方法...
ppt是一款演示文稿软件,用户可以在投影仪或者计算机上进行演示,办公或者生活中都有使用到.一些win7系统用户说电脑上的ppt打不开,好不容易制作出一个完美的PPT文档,辛辛苦苦的成功,出现打不开现象 ...
转载：Android底部导航栏，三种风格和实现
原文出处标题:Android底部导航栏,三种风格和实现作者:阿飞__ 原文链接:Android底部导航栏,三种风格和实现_阿飞__的博客-CSDN博客_android导航栏一.效果图展示如果动 ...
Android底部导航栏的三种风格实现
一.效果图展示如果动图没有动的话,也可以看下面这个静态图以下挨个分析每个的实现,这里只做简单的效果展示,大家可以基于目前代码做二次开发. 二.BottomNavigationView 这是 Goo ...
苹果7 无线流量连接不上网络连接服务器,iPhone7连不上wifi无线网的四种解决方法...
iPhone7连不上wifi无线网的四种解决方法重新打开无线如果是出门在外,想要连接一个以前没有连接过的无线网络,但又连接不上的话,可以先尝试关闭无线,再打开无线试试.在「设置」列表中,可以关闭. ...

HTML导航栏的四种制作方法

HTML导航栏的四种制作方法相关推荐

最新文章

热门文章