利用HTML制作一二级导航菜单

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量4.4k 收藏 53
点赞数 10
分类专栏： HTML5 文章标签： 导航 前端 html css 二级导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33587638/article/details/50445060
版权
可以说现在导航都是利用列表来制作的，废话少说，开始我们的二级导航制作
我们先从一级导航开始，我们在页面中建一个ul列表，id为nav。在前端css命名中导航可以说都是叫nav。接下来我们里面添加8个列表并设置超链接，我们把超链接的目标设置成空链接，代码如下：
好啦，现在我们在浏览器中预览看看

下面这段代码不理解自行度娘，不解释 
body{
	margin:0px;
	padding:0px;
}

现在我们给一级导航nav设置一下属性，设置宽为800像素，高为45像素，居中显示，没有列表符号，设置padding为0； 
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
        padding:0;
}
接下来我们给一级导航栏目的列表设置属性，列表的宽度为100像素，左浮动，字体的行高为45像素（这样在导航中就垂直居中了）；字体居中对齐，把li转换成块元素 
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
}

最后我们给超链接设置css样式，因为超链接默认是有下划线，然后字体是蓝色的。现在我们把字体改成黑色，黑色的十六进制是#000000,去掉下划线 
#nav li a {
	color:#000;
	text-decoration:none;
}
完整的代码如下： 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <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>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>


做到这里我们的一级导航就差不多了，我们浏览器预览下：



接下来我们给一级导航美化下， 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	background-image:url(images/nav.png);
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
}
#nav li:hover{
	background-color:#1395FF;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <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>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>

好啦，现在开始我们二级导航的制作，二级导航我们也是用列表来制作
代码如下：
（注意，二级导航的代码要嵌套在一级导航里面） 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	background-image:url(images/nav.png);
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
}
#nav li:hover{
	background-color:#1395FF;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <!-- 要嵌套在一级导航的li里面，不能嵌套在超链接里面 -->
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <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>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>


浏览器预览会有一点点的错位，设置padding就可以了 

#nav li ul{
	padding:0;
}



下面我们美化下二级导航。具体我们就不讲了 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	background-image:url(images/nav.png);
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
	position:relative;
}
#nav li:hover{
	background-color:#1395FF;
}
#nav li ul {
	position:absolute;
	width:100px;
	left:0px;
	top:45px;
	padding:0;
	border-bottom:1px solid #ccc;
}
#nav li ul li{
	width:98px;
	height:44px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-top:1px solid #ccc;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <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>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>

定位：position
这次我们用到了两个属性：absolute（相对定位） relative（绝对定位）
position:absolute;
 left:0px;
 top:45px;

意思我们相对一级导航左边是0像素，上边是45像素。top=一级导航的高度



最后一点：鼠标滑过显示。
这个需要用到鼠标的hover

设置鼠标滑过一级导航的时候，下面的二级导航就显示，没有滑过二级导航就隐藏起来。 

#nav li ul {
        display:none;<!--鼠标没有滑过就隐藏起来-->
}
#nav li:hover ul{
	display:block;<!--鼠标滑过就显示出来-->
}
好啦，我们的二级导航就制作完成了



附上完整的代码： 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航制作-qq_33587638</title>
<style>
body{
	margin:0px;
	padding:0px;
}
#nav{
	width:800px;
	height:45px;
	margin:auto;
	list-style:none;
	background-image:url(images/nav.png);
	padding:0;
}
#nav li{
	width:100px;
	float:left;
	line-height:45px;
	text-align:center;
	display:block;
	position:relative;
}
#nav li:hover{
	background-color:#1395FF;
}
#nav li ul {
	position:absolute;
	width:100px;
	left:0px;
	top:45px;
	padding:0;
	border-bottom:1px solid #ccc;
	display:none;
}
#nav li:hover ul{
	display:block;
}
#nav li ul li{
	width:98px;
	height:44px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-top:1px solid #ccc;
}
#nav li a {
	color:#000;
	text-decoration:none;
}
</style>
</head>

<body>
  <ul id="nav">
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <li><a href="#" >导航</a>
      <ul>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
        <li><a href="#" >二级导航</a></li>
      </ul>
    </li>
    <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>
    <li><a href="#" >导航</a></li>
  </ul>
</body>
</html>












qq_33587638
关注
  • 10
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery制作一个横向二级导航下拉菜单
06-05
通常，二级导航菜单由一个主导航条和嵌套的子菜单组成。我们可以创建一个`<ul>`作为一级菜单，其中的每个`<li>`包含一个链接和一个二级菜单的`<ul>`。二级菜单默认应设置为隐藏，例如使用CSS的`display:none`。 ```...
HTML简单实现二级菜单栏（看了基本会）
宾有为的博客
02-22 1万+
菜单栏就是所谓的正常状态看不到二级和三级菜单，当你移鼠标到指定的位置后显示出来，因此，实现二级菜单栏只需要两行css代码就可以了。以下是未添加任何特效的效果图 1、打开写网页代码的软件，并新建一个html网页文件，在body里写上html代码： <body> <div class="a"> <ul> <li> <a href="#"&...
HTML导航栏二级菜单（垂直、水平方向）
weixin_48591974的博客
09-12 4587
二级菜单是指主菜单的子菜单。菜单栏实际是一种树型结构，子菜单是菜单栏的一个分支。简单分享主要的垂直和水平方向的CSS设计。
＜CSS＞一级导航栏和二级导航栏
Snowyufly的博客
07-18 1万+
二级导航栏的制作
二级导航栏（html、css)
leihao-lester
10-13 1万+
二级导航栏（html、css) 效果图： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial
HTMl+CSS制作二级菜单或二级导航栏
热门推荐
m0_49406079的博客
01-05 2万+
二级菜单的实现思路为： 1.在默认状态下，使用display:none;将二级菜单隐藏。 2.当一级菜单中的列表标签li获取焦点(hover)后，使用display:blick;将二级菜单显示出来。 3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。 　　本内容面向小白向，我在代码中加了详细的注释，解释了语句的作用。 　　二级菜单展开后 效果如下(没有美化，见谅)： 　　　HTMl代码如下：...
导航栏以及二级菜单栏（下拉列表）的制作
weixin_74835614的博客
11-30 1万+
作为新手小白，在我们熟悉了HTML , CSS，JS的功能和语法之后，Web前端开发中，更重要的还有界面的美化，主要依据CSS的庞大功能来实现，今天我来给大家分享的是，利用html代码来实现横向导航栏以及下拉菜单列表的实现。首先，用和标签将导航栏的布局搭建出来（此时的一级导航栏还是纵向的位置，如何拉至横向需要CSS部分的辅助，下面CSS部分会提到），代码中的"登录","注册","留言","我的"为导航栏的标签部分，搭建二级菜单栏的代码位置，类似于“嵌套”
二级导航栏
jakelihua
11-15 2790
简介：本文通过HTML与CSS相集合的方式，来实现二级导航菜单。 CSS渲染 最后的结果展示：
CSS3 二级导航菜单的制作的示例
09-24
本示例将详细介绍如何使用CSS3来创建一个响应式的二级导航菜单。 首先，我们需要理解二级导航菜单的基本结构。在HTML中，通常我们会使用`<nav>`标签来定义导航区域，然后利用`<ul>`和`<li>`标签来构建菜单的层次。...
纯html+css制作三级下拉菜单
09-24
总之，纯HTML+CSS制作的三级下拉菜单是一个实用的网页设计技巧，通过HTML的结构化标签和CSS的样式控制，可以创建出用户友好的导航界面。理解这个过程不仅有助于提升网页设计技能，还能为构建更复杂的交互功能打下...
纯html5折叠式导航菜单
06-05
在这个“纯HTML5折叠式导航菜单”中，我们将深入探讨如何利用HTML5的特性创建一个交互式的、可折叠的导航菜单，这在现代网页设计中是非常常见的元素。 首先，HTML5引入了新的结构元素，如标签，它用于定义页面的...
竖向二级折叠导航菜单(只展开一个)
06-05
本文将深入探讨“竖向二级折叠导航菜单（只展开一个）”这一主题，这是一种常见的网页布局策略，旨在优化用户体验，尤其是在移动设备上。 首先，我们要理解“竖向二级”这一概念。竖向导航菜单是指菜单项沿着页面的...
用html跟css实现基本的二级导航栏
wrm666的博客
07-17 342
<ul></ul></ul></div></li></ul></ul></div></li></ul></ul></div></li></ul></ul></div></li></ul></ul></div></li></ul></ul></div></li></ul></div>
运用html+css制作二级导航栏
weixin_65789931的博客
07-17 1341
运用html+css制作二级导航栏
html+css 实现导航栏二级菜单——气泡框
m0_55879104的博客
06-07 2364
HTML+CSS 实现二级菜单气泡框
Html5+CSS3 实现网站头部 导航栏和二级导航栏
小绵杨
11-03 1万+
需求 利用html5和css3来做一个网站头部，以及包含二级菜单的导航栏。 实现图如下：悬浮导航栏展开二级导航栏 实现 css代码：index.css /* css样式初始化 */ * { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: non
html怎样 做二级菜单,HTML制作二级下拉菜单的方法步骤
weixin_31649177的博客
06-30 1万+
网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢?工具/材料hbuilder操作方法01如图,先书写一个div标签,并且给这个div标签添加一个id。02然后在div里面嵌套一个p标签，p标签里面放置了一个主菜单“头像”。我们要做的效果就是当鼠标放在“头像”这里就会弹出下拉菜单。03然后我们使用*清除所有元素的margin和padding值。04接着我们来设置id为ic...
HTML+ CSS来实现一个简单的二级菜单栏
qq_40992225的博客
09-20 6312
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 582
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值