HTML 导航栏的四种制作⽅法
1.⾸先，⼤家可以直接使⽤html5中的导航栏标签<nav></nav>
具体代码如下
这是实际的效果，可以根据实际需要，去除下划线和颜⾊等等  2.接下来可以⽆序列表，去除它的默认样式设置浮动就可以了，具体的代码如下
这是实际的效果图。
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="UTF-8">5
<title>导航栏</title>6
</head>7
<body>8
<nav>9
<a href="#">⾸页</a>10
<a href="#">新闻</a>11
<a href="#">关于我们</a>12
</nav>13 </body>14</html>
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8" />5
<title></title>6
<style>7
ul{8
height: 100px;9
width:100%;10
list-style-type: none; //取消⽆序列表的固定样式11
}12
ul li{13
float:left;14
margin: 20px;  //设置三个元素的外间距15
html制作一个网页}16
</style>17
</head>18
<body>19
<ul>20
<li><a href="">⾸页<a></li>21
<li><a href="">新闻<a></li>22
<li><a href="">关于我们<a></li>23
</ul>24
25 </body>26</html>
3.设置超链接
在这⾥还想说的是，<ul>的⼦集元素只能是<li>，不可以是别的，HTML的语义很弱，标签的使⽤很重要，在实际的⽹页开发中，不同标签的语义，权重都不⼀样，所以，优化也不⼀样。
4.可以使⽤bootstrap，⼤家可以看⼀下具体的代码和详细的注释。
实际效果如下1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8" />5
<title>bootstrap 的学习</title>6
<!--导⼊基本样式-->7
<link rel="stylesheet" href="css/bootstrap.css">  8
<!--导⼊基本样式的压缩-->9
<link rel="stylesheet" href="css/bootstrap.min.css">10
<!--导⼊主题样式  注意：顺序 不可变-->11
<link rel="stylesheet" href="css/bootstrap-theme.css">12
</head>13
<body>14
<!--类nav 清除列表的默认样式  nav-tabs 定义tabs 的标题栏-->15
<ul class="nav nav-tabs">16
<li><a href="#tab2" data-toggle=tab">⾸页</a></li>17
<li><a href="#tab2" data-toggle=tab">关注</a></li>18
<li><a href="#tab2" data-toggle=tab">个⼈中⼼</a></li>19
</ul>20
21 </body>22</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。