社区学习工具库休闲

简体中文

首页 > web前端 > html教程 > 正文

如何通过html制作导航条

迷茫

发布： 2017-03-25 15:26:46

原创

6189 人浏览过

今天分享一下简单导航栏的制作方法：

第一步：引入css样式表，新建一个id为nav的层，使用

、标签来制作完成效果。

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body></html>

登录后复制

第二步设置CSS样式：

1.设置nav的属性

#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
}

登录后复制

展示效果如下所示：

　　

2.清除

标签前面自带的点

#nav ul{
	list-style: none;
}

登录后复制

3.设置

标签的属性

#nav ul li a{
	width: 98px;
	height: 50px;
	float: left;
	border: 1px solid red;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

登录后复制

4.设置鼠标滑过效果

#nav ul li a:hover{
	background-color: #ABCDEF;
}

登录后复制

最终效果：

完整HTML代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/yiji.css"/>
	</head>
	<body>
		<p id="nav">
			<ul>
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
			</ul>
		</p>
	</body>
</html>

登录后复制

完成CSS样式代码部分：

*{
	margin: 0;
	padding: 0;
}
#nav{
	width: 500px;
	height: 50px;
	border: 1px solid red;
	margin: 30px;
}

#nav ul{
	list-style: none;
}
#nav ul li a{
	width: 98px;
	height: 50px;
	float: left;
	border: 1px solid red;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

#nav ul li a:hover{
	background-color: #ABCDEF;
}

登录后复制

以上是如何通过html制作导航条的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：

html，导航，一级导航

来源：php.cn

上一篇：html表单知识大全下一篇：行内元素，块级元素与空元素的差别详解

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

mysql执行函数mysql_query()的定义与用法示例

1970-01-01 08:00:00
php连接mysql数据库详细步骤（图文）

1970-01-01 08:00:00
sql数据库的增删改图文教程（phpMyAdmin使用教程）

1970-01-01 08:00:00
sql数据库导入导出步骤教程（图）

1970-01-01 08:00:00
sql数据表的可视化增删改教程（phpMyAdmin使用教程）

1970-01-01 08:00:00
SQL语句进行数据表的增删改查教程（phpMyAdmin使用教程）

1970-01-01 08:00:00
Java多线程基础详解

1970-01-01 08:00:00
php中文件上传图片

2023-03-06 22:20:01
对JS关于对象创建的几种方式总结

1970-01-01 08:00:00
深入理解Js中的this关键字

1970-01-01 08:00:00

最新问题

在移动视图中，当用户点击链接时，如何关闭此导航栏？当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...

来自于 2024-04-06 19:23:03

0

1

411

为什么我的 hr 标签设置为白色纯色时是半透明的？我有一个html（带有引导程序）和一个CSS，在我的html中我有一个<hr>标签，它有一个类，然后在我的CSS中我有它的边框样式。它是半透明的，你可以看到白色，但它不...

来自于 2024-04-06 16:13:26

0

1

500

显示隐藏的侧面板：选中我希望在侧面板中有一个导航菜单，可以通过动画汉堡菜单切换到视图。我想仅使用CSS创建它，而不使用任何JS。:checked伪类似乎是可行的方法，但我无法让它工作。到目前为止我拥有的...

来自于 2024-04-06 15:49:33

0

1

319

导航栏上的CSS底部边框我有一个导航栏，当悬停列表中的任何项目时，我在底部添加了一条红线，但我想将该红线移到标题下方（例如“服务”），知道如何实现此目的？我在codepen中添加了一个小示例，以便您可以轻...

来自于 2024-04-06 15:04:41

0

2

347

有没有办法在vue中设置route prop？我想导航到页面中的特定选项卡this.$router.push({name:"AdminNotifications",params:{tab:"req...

来自于 2024-04-06 11:35:59

0

1

456

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1420716
php入门教程之一周学会PHP

4264108
JAVA 初级入门视频教程

2510857
小甲鱼零基础入门学习Python视频教程

505839
PHP 零基础入门教程

860948

最新下载

更多>

网站特效

网站源码

网站素材

前端模板