HTML导航栏的四种制作方法

HTML导航栏的四种制作方法1.首先,大家可以直接使用html5中的导航栏标签<nav></nav>具体代码如下<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>导航栏</title> </

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

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>

 

这是实际的效果,可以根据实际需要,去除下划线和颜色等等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>

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导航栏的四种制作方法

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140088.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 为有机会进大厂,程序员必须掌握的核心算法有哪些?

    由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过…

  • 蓝桥杯真题总结(蓝桥杯考什么)

    Python获取每一位的数字,并返回到列表:方法一:whilevalue:result.append(value%10)value=value//10#逆序,按正常的顺序返回result.reverse()方法二:list(map(int,str(value)))方法三:#divmod()是内置函数,返回整商和余数组成的元组result=[]whilevalue:value,r=divmod(value,1

  • having 用法

    having 用法SELECTfee.bank_code,COUNT(1)cFROMt_fp_feefeeWHEREfee.fcd>=DATE’2019-6-13’GROUPBYfee.bank_codeHAVINGCOUNT(1)>=1000注意COUNT(1)不能改为C,不能使用别名…

  • Navicat Premium 15激活【2021最新】

    (Navicat Premium 15激活)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • influx测试——单条读性能很差,大约400条/s,批量写性能很高,7万条/s,总体说来适合IOT数据批量存,根据tag查和过滤场景,按照时间顺序返回…

    influx测试——单条读性能很差,大约400条/s,批量写性能很高,7万条/s,总体说来适合IOT数据批量存,根据tag查和过滤场景,按照时间顺序返回…

  • 彻底弄懂C语言数组名

    彻底弄懂C语言数组名先定义一个一维数组inta[]={0,1,2,3,4,5,6,7,8,9};一、数组名是什么数组名的值是数组首元素的指针常量。数组名不是指针,但大多数使用到数组名的地方,编译器都会把数组名隐式转换成一个指向数组首元素的指针来处理。只有两种情况下例外:第一种是对数组名使用sizeof运算符sizeof(a)这将会得到整个数组所占的内存大小,a是长度为10的int(4字节

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号