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)
blank

相关推荐

  • CentOS7下安装mysql5.7[通俗易懂]

    CentOS7下安装mysql5.7[通俗易懂]更多精彩技术分享请浏览本人博客:https://blog.csdn.net/wohiusdashi一、安装YUMRepo1、由于CentOS的yum源中没有mysql,需要到mysql的官网下载yumrepo配置文件。下载命令:wgethttps://dev.mysql.com/get/mysql57-community-release-el7-9.noarch.rpm…

  • HTML+CSS实现炫酷的登录界面「建议收藏」

    HTML+CSS实现炫酷的登录界面「建议收藏」谢谢大家的支持,您的一键三连是罡罡同学前进的最大动力!一键三连一键三连一键三连一键三连一键三连一键三连HTML+CSS实现炫酷的登录界面上效果图!鼠标点击用户名或密码,字体会向上滑动,调节大小并高亮。鼠标放到登录按钮上,按钮可以高亮!下面是HTML的代码:<!DOCTYPEhtml><htmllang=”zh-CN”> <head> <metacharset=”utf-8″/> <meta

  • Linux下安装lrzsz

    Linux下安装lrzsz一. 手动编译安装1、 下载安装包,wget https://ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz  或者是  上传已经下载好的安装包lrzsz2、 cd /usr/local/src/3、 mkdir lrzsz4、 cd lrzsz/5、 解压:tar -xvf lrzsz-0.12.20.tar.gz6、 cd lrzsz…

  • 大话数据结构PDF

    大话数据结构PDF《大话数据结构》相关下载地址重难点目录下载地址云盘:touchhere.提取码:93dc重难点目录第一章绪论逻辑结构,物理存储结构(顺序和链式)数据结构类型第二章算法时间复杂度和空间复杂度,计算方法最坏情况、平均情况。第三章链表动态链表:指针,常用静态链表:数组,无指针语言(Basic)使用,较少用 循环链表:(单循环)next双向链表:next,prior 双向循环链表,插入时候的指针改动,顺序非常重要。–》第四章

  • 解决打印机报错:操作无法完成(错误0x00000709)。

    解决:操作无法完成(错误0x00000709)。再次检查打印机名称,并确保打印机已连接到…上午同时说,网络打印机打印不了,于是首先看一下打印服务器IP是不是给换了,结果没换。接着尝试重新添加一

    2021年12月22日

发表回复

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

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