讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

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

如何通过html制作导航条

迷茫

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

原创

6739人浏览过

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

第一步：引入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.设置

AI Sofiya

AI Sofiya

一款AI驱动的多功能工具

AI Sofiya

147

AI Sofiya

标签的属性

#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

大家都在看：

如何标记html_使用注释标记HTML代码段落【段落】 html怎么单机运行_html单机运行方法【教程】 html如何注册课程表_用HTML制作课程表注册页面【注册】 html图片如何_处理HTML图片的尺寸与显示【处理】 HTML如何取消文字粗体_字体样式重置技巧【教程】

HTML速学教程(入门课程)

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

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

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

作者最新文章

php中文件上传图片

2023-03-06 22:20:01
Java多线程基础详解

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

1970-01-01 08:00:00
对JS关于对象创建的几种方式总结

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
php连接mysql数据库详细步骤（图文）

1970-01-01 08:00:00
mysql执行函数mysql_query()的定义与用法示例

1970-01-01 08:00:00

最新问题

html5如何使用模板_HTML5使用模板标签创建内容【模板】 template元素提供原生HTML模板方案：内容默认不渲染，须置于body或head内；需用JavaScript克隆content后插入目标容器；支持slot实现内容分发；content为只读DocumentFragment；须确保DOM加载完成后再访问。

2025-12-19 18:12:08

458

js脚本怎么运行成html_js脚本转html运行方法【教程】 1、通过内联方式可将JS代码嵌入HTML的标签运行；2、外部JS文件需保存为.js并用src属性引入；3、事件绑定如onclick可触发JS执行；4、动态创建script标签能实现按需加载。

2025-12-19 18:01:02

854

斗鱼如何html_在斗鱼平台使用HTML代码的方法【平台】斗鱼平台不支持用户直接提交HTML代码，但可通过四种合规方式实现HTML相关功能：一、用直播间组件iframe嵌入HTTPS外部网页；二、在个人简介用类Markdown语法模拟HTML效果；三、经开放平台审核后使用弹幕CSS扩展；四、通过直播伴侣加载本地file://HTML悬浮窗。

2025-12-19 17:41:55

994

HTML如何破解加密源码_前端保护与解密分析【解析】若HTML源码被混淆，可通过五种方法解析：一、追踪JS执行流程并查看渲染后DOM；二、提取并手动执行嵌入式解密逻辑；三、禁用JavaScript查看原始响应；四、用抓包工具捕获未加密HTTP响应；五、反编译分析WebAssembly解密模块。

2025-12-19 17:40:52

962

html5如何表格居中_HTML5表格居中实现与对齐技巧详解【方法】 HTML5表格居中可通过五种CSS方法实现：一、margin:0auto配合固定宽度；二、text-align:center与display:inline-block结合；三、Flexbox的justify-content和align-items；四、Grid的place-items:center；五、已废弃的align="center"属性（不推荐）。

2025-12-19 17:18:09

197

html5如何用canvas_HTML5 Canvas使用步骤与绘图技巧详解【方法】 HTML5Canvas通过JavaScript提供二维绘图能力：需先创建canvas元素并获取2D上下文；再绘制基本图形；接着设置样式颜色；然后应用坐标变换；最后绘制图像与文本。

2025-12-19 17:07:40

546

html如何导出到excel_html导出excel步骤【方法】可通过五种方式将HTML表格导出为Excel：一、Blob+a标签下载CSV；二、SheetJS生成.xlsx；三、Node.js+exceljs服务端生成；四、dataURI导出CSV；五、打印导向导出。

2025-12-19 16:58:37

858

HTML5如何弄字体_HTML5自定义字体引入与使用【字体】需用@font-face引入自定义字体，优先WOFF2格式并提供多格式回退；通过font-family调用，建议加通用字体兜底；可用CSS变量统一管理族名；注意CORS跨域限制及font-display:swap优化加载体验。

2025-12-19 16:57:08

327

html5插入特殊符号_实体字符与Unicode符号插入【指南】应声明UTF-8编码并用HTML实体或直接插入Unicode字符：①加；②用©、©或©等实体；③UTF-8保存下可直输★→≤α∑等符号。

2025-12-19 16:40:00

406

html字如何调节大小_调节HTML字体大小属性设置【字体】 HTML字体大小调节有五种方法：一、内联style设font-size；二、CSS类选择器统一控制；三、语义化标签配合样式重置；四、rem单位基于根元素缩放；五、viewportmeta适配移动端。

2025-12-19 16:31:29

432

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

Bootstrap 5教程

24181次学习
收藏
AngularJS教程

18059次学习
收藏
CSS教程

150691次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部