讲师中心微信公众号

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

最近更新

0

0

如何通过html制作导航条

迷茫

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

|

6739人浏览过

|

来源于php中文网

原创

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

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

、标签来制作完成效果。

第二步设置CSS样式：

1.设置nav的属性

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

展示效果如下所示：

立即学习“前端免费学习笔记（深入）”；

　　

2.清除

#nav ul{
	list-style: none;
}

3.设置

Bandy AI

Bandy AI

全球领先的电商设计Agent

下载

标签的属性

#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代码部分：

完成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 复选框（checkbox）的未勾选状态

如何在网页中直接嵌入未托管的 HTML 内容（无需服务器部署）

如何从混合 HTML 表格中精准提取特定标题下的所有数据行

如何从混合 ResultSet 中按标题分组提取后续数据

如何在网页中直接嵌入未托管的 HTML 文件内容

HTML速学教程(入门课程)

HTML速学教程(入门课程)

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

下载

相关标签:

html

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

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

作者最新文章

php中文件上传图片

2017-03-27 16:39

Java多线程基础详解

2017-03-28 15:36

深入理解Js中的this关键字

2017-03-26 17:44

对JS关于对象创建的几种方式总结

2017-03-26 17:49

sql数据库的增删改图文教程（phpMyAdmin使用教程）

2017-04-07 15:00

sql数据库导入导出步骤教程（图）

2017-04-07 14:58

sql数据表的可视化增删改教程（phpMyAdmin使用教程）

2017-04-07 14:55

SQL语句进行数据表的增删改查教程（phpMyAdmin使用教程）

2017-04-07 14:47

php连接mysql数据库详细步骤（图文）

2017-04-07 16:00

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

2017-04-07 17:57

热门AI工具

更多

DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

更多

C++ 设计模式与软件架构

C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化，包括单例模式、工厂模式、观察者模式、策略模式、命令模式等，结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析，帮助开发者掌握如何运用设计模式构建高质量的软件架构，提升系统的灵活性与可扩展性。

8

2026.01.30

c++ 字符串格式化

c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容，阅读专题下面的文章了解更多详细内容。

8

2026.01.30

java 字符串格式化

java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

6

2026.01.30

python 字符串格式化

python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容，阅读专题下面的文章了解更多详细操作。

1

2026.01.30

java入门学习合集

java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容，阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集

java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容，阅读专题下面的文章了解更多详细操作。

17

2026.01.29

java成品学习网站推荐大全

java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容，阅读专题下面的文章了解更多详细推荐内容。

18

2026.01.29

Java字符串处理使用教程合集

Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容，阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集

Java空对象相关教程合集

本专题整合了Java空对象相关教程，阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多

网站特效

/

网站源码

/

网站素材

/

前端模板

相关下载

更多

CSS3实现牛奶样式加减按钮

精品课程

更多

相关推荐

/

热门推荐

/

最新课程

Bootstrap 5教程

Bootstrap 5教程

共46课时 | 3.1万人学习

AngularJS教程

AngularJS教程

共24课时 | 3.1万人学习

CSS教程

CSS教程

共754课时 | 25.2万人学习

最新文章

更多

如何正确处理 HTML 复选框（checkbox）在 PHP 中的未勾选状态

HTML表单提交导致页面刷新：如何防止结果闪退并正确显示验证反馈

如何将 ES6 类正确转换为传统函数构造器（含继承与箭函数处理）

HTML表单提交导致页面闪退：如何阻止默认行为实现稳定反馈

如何正确使用 padding 和 margin 控制行内元素的间距

如何让 Video.js 播放 HLS 流时自动播放并全屏自适应

如何修复因 line-height 设置过小导致的段落重叠问题

如何修复 CSS 中 line-height 过小导致的段落重叠问题

如何在网页中直接嵌入未托管的 HTML 内容

如何用纯 CSS 实现响应式图片轮播器（无 JavaScript）

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

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

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

PHP学习

技术支持

返回顶部