文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

HTML一级导航制作

高洛峰

发布： 2017-02-16 14:39:45

原创

2859人浏览过

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

第一步：引入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;
}

登录后复制

展示效果如下所示：

　　 HTML一级导航制作

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一级导航制作

完整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速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：HTML <meta> 标签下一篇：【HTML】Html页面跳转的5种方式

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

作者最新文章

.NET微信公众号获取OpenID和用户信息实例解析

1970-01-01 08:00:00
图文详解.Net语言Smobiler开发之如何仿微信朋友圈的消息样式

1970-01-01 08:00:00
ASP.NET代码轻松实现微信抢红包

1970-01-01 08:00:00
C#开发微信多客服功能及开发集成实例

1970-01-01 08:00:00
C#开发微信门户应用管理系统功能介绍

1970-01-01 08:00:00
微信公众平台消息接口开发地理位置查询附近商家实例

1970-01-01 08:00:00
微信开发系列教程（3）

1970-01-01 08:00:00
微信开发系列教程（2）

1970-01-01 08:00:00
微信开发系列教程（1）

1970-01-01 08:00:00
解析微信小程序SocketIO实例

1970-01-01 08:00:00

最新问题

HTML下载链接添加进度条怎么实现实现HTML下载链接添加进度条的关键在于利用JavaScript和HTML5的FileAPI来监控下载进度。让我们深入探讨如何实现这一功能，并分享一些实际应用中的经验。在开始之前，先回答你的问题：HTML下载链接添加进度条可以通过JavaScript监听XMLHttpRequest对象的progress事件来实现。我们可以利用这个事件来更新进度条的显示，从而让用户实时了解下载进度的变化。现在，让我们详细展开这个话题。在我的职业生涯中，我曾多次遇到需要为下载链接添加进度条的需求。无论是大文件下载还

2025-06-08 10:30:02

997

HTML表单提交后清空输入框内容怎么操作可以使用JavaScript在表单提交后通过form.reset()方法清空HTML表单的输入框内容。具体步骤包括：1.在表单的onsubmit事件中调用submitForm函数。2.使用event.preventDefault()阻止表单默认提交行为。3.获取表单元素并处理数据。4.调用form.reset()方法清空表单。

2025-06-07 08:21:01

613

html中h1和h2的区别一级二级标题的3个关键差异 h1和h2标签在HTML中的三个关键差异是：1.h1用于页面主标题，h2用于子主题；2.h1字体默认比h2大；3.一个页面通常只有一个h1，多个h2用于划分章节。

2025-06-06 09:15:02

884

html中外边距怎么设置 html外边距margin调整技巧在HTML中设置外边距需要使用CSS。具体方法包括：1.使用通用margin属性设置所有方向的外边距，如margin:20px。2.使用单独的margin属性设置不同方向的外边距，如margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px，或简写为margin:10px20px30px40px。

2025-06-05 08:21:01

713

html中的行内标签有哪些 html行内标签完整列表解析 HTML中的行内标签在网页设计中起着关键作用，它们用于修饰和格式化文本内容，不会自动换行。常见的行内标签包括：1.用于灵活的样式定制；2.用于创建超链接；3.和用于强调文本；4.用于嵌入图像；5.用于创建表单控件；6.用于创建可点击按钮。使用这些标签时应注意语义化、样式与结构分离、无障碍设计、性能优化和表单设计，以提升网页的整体效果和用户体验。

2025-06-04 08:06:01

623

html中tbody标签的作用表格主体tbody的语义化意义标签用于定义表格的主体部分，其作用是将表格数据与表头和表尾区分开来，提升表格的语义化和可访问性。使用的好处包括：1.增强可访问性，帮助屏幕阅读器正确识别表格结构；2.便于样式控制，可以对表格主体部分进行单独的样式设置；3.便于数据操作，支持动态增删改查，提高操作效率；4.性能优化，通过JavaScript动态操作内容，提升性能。

2025-06-03 10:00:02

859

HTML导航栏怎么做？nav标签有什么优势？使用HTML创建导航栏推荐采用ul+li结构包裹在nav标签内，1.基本结构用ul+li搭建更清晰且方便CSS美化；2.nav标签具备语义化优势，提升SEO和可访问性；3.推荐使用flex布局进行样式处理，实现水平排列与悬停效果；4.需添加aria-label属性并考虑响应式设计适配移动端。

2025-06-02 10:12:07

890

HTML如何实现轮播图？carousel怎么用HTML制作？要实现基础轮播图需结合HTML、CSS和JavaScript。首先用HTML搭建结构，外层div容器包含图片列表，默认第一张显示；接着用CSS将图片叠放并隐藏非active图片；再通过JavaScript定时切换active类实现自动播放；最后可添加按钮实现手动切换。步骤清晰，结构为先，样式控制显示，JS实现动态切换，扩展性强。

2025-05-31 10:03:01

859

HTML里怎么插入YouTube视频在HTML中插入YouTube视频可以通过以下步骤实现：1.使用标签嵌入视频，替换VIDEO_ID为YouTube视频ID。2.采用响应式设计，使用包装div和CSS确保视频在不同设备上保持16:9比例。3.应用懒加载技术，使用IntersectionObserverAPI减少页面加载时间。4.添加视频标题和描述，提升SEO和用户体验。5.考虑用户隐私，提供同意选项并控制自动播放。

2025-05-30 08:18:02

190

怎样在HTML中创建底部导航栏在HTML中创建底部导航栏使用和标签。1.使用和列出导航链接。2.通过CSS实现响应式设计，如媒体查询调整移动设备显示。3.优化用户体验，确保链接清晰易懂和可访问性。4.使用语义化标签提升SEO效果。5.考虑性能优化，如使用CSSSprites减少HTTP请求。6.使用position:fixed;使导航栏固定在屏幕底部。7.利用z-index和flexbox解决常见显示问题。

2025-05-29 09:06:02

611

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

ThinkPHP5快速开发企业站点[全程实录]

398992次学习
收藏
PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）

50752次学习
收藏
Thinkphp3.2.3个人博客开发

212404次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

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

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

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

PHP学习

技术支持

返回顶部