html导航栏怎么做?

html导航栏怎么做?下面本篇文章给大家介绍一下HTML导航栏的几种制作方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

【推荐:html手册

具体代码如下

<!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>

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

1.png

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>

这是实际的效果图。

2.png

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

3.可以使用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>

实际效果如下

3.png

更多html前端相关知识,请查阅 前端教程 !!

以上就是html导航栏怎么做?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » 其他答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏