html导航栏怎么设置

htML导航栏的设置方法：1、直接使用html5中的导航栏标签【nav> /nav> 】；2、可以无序列表，去除默认样式设置浮动就可以；3、设置超链接。

本文操作环境：Windows7系统，html5版本，Dell G3电脑。

推荐：HTML教程

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导航栏怎么设置的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！