HTML导航栏的四种制作方法

全栈程序员站长

发布于 2022-08-24 09:43:06

3.2K0

发布于 2022-08-24 09:43:06

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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>

实际效果如下