devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【html+css（大作业）】二级菜单导航栏_html精美的网页二级导航栏

作者：2023面试高手 | 2024-06-01 17:53:29

赞

踩

html精美的网页二级导航栏

目录

实现效果

 代码及其解释

html部分

CSS部分

hello，hello好久不见！

今天我们来写二级导航栏，所谓二级导航栏，简单来说就是鼠标放上去就有菜单拉出：

实现效果

 代码及其解释

html部分

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<link rel=" shortcut icon"  type="image/x-icon" href="./img/图标1.jpg">
  5. 		<link rel="stylesheet" type="text/css" href="./css/首页.css"/>
  6. 		<meta charset="utf-8" />
  7. 		<title>数博会官网</title>
  8. 	</head>
  9. 	<body>
  10. 		<div class="navbar">
  11. 			<div class="nav">
  12. 				<ul>
  13. 			<li></li>
  14. 			<li></li>
  15. 			<li></li>
  16. 					
  17. 						<li><a href="#">首页</a>
  18. 							<ol>
  19. 								<li><a href="#">数博会介绍</a></li>
  20. 								<li><a href="#">往届回顾</a></li>
  21. 								<li><a href="#">精彩瞬间</a></li>
  22. 							</ol>
  23. 						</li>
  24. 					
  25. 					
  26. 				     <li><a href="#">新闻中心</a>
  27. 					 <ol>
  28. 					 	<li><a href="#">头条新闻</a></li>
  29. 						<li><a href="#">展会新闻</a></li>
  30. 						<li><a href="#">行业新闻</a></li>
  31. 						<li><a href="#">展商新闻</a></li>
  32. 					 </ol>
  33. 					 </li>
  34. 					 
  35. 					 <li><a href="#">峰会论坛</a>
  36. 					 <ol>
  37. 					 	<li><a href="#">大会日程</a></li>
  38. 					 						<li><a href="#">高端对话</a></li>
  39. 					 						<li><a href="#">专业论坛</a></li>
  40. 					 					
  41. 					 </ol>
  42. 					 </li>
  43. 					 
  44. 					 
  45. 					 <li><a href="#">展览会</a>
  46. 					 <ol> 
  47. 					 	<li><a href="#">展会介绍</a></li>
  48. 					 						<li><a href="#">展商名录</a></li>
  49. 					 						<li><a href="#">展品列表</a></li>
  50. 					 						<li><a href="#">展区分布</a></li>
  51. 					 </ol>
  52. 					 </li>
  53. 					 
  54. 					 
  55. 					<li><a href="#">数博发布</a></li>
  56. 					<li><a href="#">大赛</a></li>
  57. 					
  58. 					<li><a href="#">观摩活动</a>
  59. 					<ol> 
  60. 						<li><a href="#">观摩活动介绍</a></li>
  61. 											
  62. 					</ol>
  63. 					</li>
  64. 					
  65. 					<li class="aaa"><a href="#">数博电讯</a>
  66. 					<ol> 
  67. 						<li><a href="#">【数博2023】第十二期</a></li>
  68. 												<li><a href="#">【数博2023】第十一期</a></li>
  69. 													<li><a href="#">【数博2023】第十期</a></li>
  70. 														<li><a href="#">【数博2023】第九期</a></li>
  71. 															<li><a href="#">【数博2023】第八期</a></li>
  72. 																<li><a href="#">【数博2023】第七期</a></li>
  73. 																	<li><a href="#">【数博2023】第六期</a></li>
  74. 																		<li><a href="#">【数博2023】第五期</a></li>
  75. 																			<li><a href="#">【数博2023】第四期</a></li>
  76. 																				<li><a href="#">【数博2023】第三期</a></li>
  77. 																					<li><a href="#">【数博2023】第二期</a></li>
  78. 																						<li><a href="#">【数博2023】第一期</a></li>
  79. 					</ol>
  80. 					</li>
  81. 					
  82. 					<li><a href="#">资料下载</a></li>
  83. 					
  84. 					
  85. 					<li><a href="#">联系我们</a>
  86. 					<ol> 
  87. 						<li><a href="#">联系方式</a></li>
  88. 											<li><a href="#">组织机构</a></li>
  89. 											<li><a href="#">隐私保护协议</a></li>
  90. 					</ol>
  91. 					</li>
  92. 					
  93. 					<li></li>
  94. 						
  95. 					
  96. 					 <li class="underline">
  97. 						 <!-- 这个元素用来定义滑动的线条 -->
  98. 						 
  99. 					 </li>
  100. 				</ul>	
  101. 			</div>
  102. 		</div>
  103. 		
  104. 		<div class="bigimg">
  105. 			<img src="img/大作业/首页大一.jpg" >
  106. 		</div>
  107. 		
  108. 		
  109. 	</body>
  110. </html>

CSS部分

  1. *{
  2. 	padding: 0;
  3. 	margin: 0;
  4. }
  5. body{
  6. 	width: 100%;
  7. 	
  8. }
  9. li{
  10. 	list-style: none;
  11. }	
  12. a{
  13. text-decoration: none;
  14. 	color:#FFFFFF;
  15. }
  16. li ol a{
  17. 	color: darkblue;
  18. 	font-size: 12.5px;
  19. 	line-height: 70px;
  20. }
  21. li ol{
  22. 	text-align: center;
  23. }
  24. .aaa ol li a{
  25. 	font-size: 10px;
  26. }
  27. .navbar{
  28. 	float: left;
  29. 	width: 100%;
  30. 	height: 70px;
  31. 	background-color: #0D2654;
  32. 	background-color: rgba(0,0,0,0.3);
  33. 	/* 怎么感觉没用啊？ */
  34. 	box-shadow: 0px 0px 5px ;
  35. }
  36. /* 后代选择器 */
  37. .navbar .nav{
  38. 	width: 100%;
  39. 	height: 100%;
  40. 	/* 让元素水平居中 */
  41. 	margin: 0 auto;
  42. }
  43. .navbar .nav ul{
  44. 	/* 相对定位 */
  45. 	position: relative;
  46. 	/* 弹性布局 */
  47. 	display: flex;
  48. 	/* 让子元素平均分配宽度 */
  49. 	justify-content: space-around;
  50. 	width: 100%;
  51. 	height: 100%;
  52. }
  53. /* 只对ul里的li起作用？ */
  54. .navbar .nav ul>li{
  55. 	background-color: #0D2654;
  56. 	background: rgba(0,0,0,0.3);
  57. 	width: 100%;
  58. 	height: 100%;
  59. }
  60. /* 只对ul里的li里的a起作用 */
  61. .navbar .nav ul>li>a{
  62. 	/* ? */
  63. 	display: block;
  64. 	width: 100%;
  65. 	height: 100%;
  66. 	line-height: 70px;
  67. 	text-align: center;
  68. }
  69. .navbar .nav ul>li ol{
  70. 	width: 100%;
  71. 	background-color: #FFFFFF;
  72. 	/* box-shadow: 1px 1px 3px; */
  73. 	/* 让盒子先沿着y轴缩放到0，也就是隐藏了 */
  74. 	transform: scaleY(0);
  75. 	/* 我们需要将盒子从上面滑动下来 设置一下缩放中心点即可 */
  76. 	transform-origin: 50% 0;
  77. 	/* 设置过渡 */
  78. 	/* transition: all 0.6s; */
  79. }
  80. .navbar .nav ul >li ol li{
  81. 	height: 70px;
  82. 	border-bottom: 1px solid rgb(245,245,245);
  83. }
  84. .navbar .nav ul>li ol li:hover{
  85. 	background-color: rgba(0,180,245,0.3);
  86. }
  87. .navbar .nav ul>li:hover ol{
  88. 	transform: scaleY(1);
  89. }
  90. .navbar .nav ul .underline{
  91. 	top: 50px;
  92. 	/* 绝对定位 */
  93. 	position: absolute;
  94. 	bottom: 0;
  95. 	/* 第一个条条距离最左边的距离 */
  96. 	left: 315px;
  97. 	width: 100px;
  98. 	/* 条高 */
  99. 	height: 2px;
  100. 	/* 设置圆角 */
  101. 	border-radius: 2px;
  102. 	background-color: white;
  103. 	/* 加上过渡 */
  104. 	/* transition: all 0.5s; */
  105. 	/* 不加了 */
  106. 	pointer-events: none;
  107. 	}
  108. 	.navbar .nav ul>li:nth-child(2):hover~ .underline{
  109. 		left: 315px;
  110. 		background-color:white;
  111. 	}
  112. 	.navbar .nav ul>li:nth-child(3):hover~ .underline{
  113. 		left: 315px;
  114. 		background-color: white;
  115. 	}
  116. 	.navbar .nav ul>li:nth-child(4):hover~ .underline{
  117. 		left: 315px;
  118. 		background-color: white;
  119. 	}
  120. 	
  121. 	.navbar .nav ul>li:nth-child(5):hover~ .underline{
  122. 		left: 425px;
  123. 		background-color:white;
  124. 	}
  125. 	.navbar .nav ul>li:nth-child(6):hover~ .underline{
  126. 		left: 525px;
  127. 		background-color: white;
  128. 	}
  129. 	.navbar .nav ul>li:nth-child(7):hover~ .underline{
  130. 		left: 635px;
  131. 		background-color:white;
  132. 	}
  133. 	.navbar .nav ul>li:nth-child(8):hover~ .underline{
  134. 		left: 735px;
  135. 		background-color: white;
  136. 	}
  137. 	.navbar .nav ul>li:nth-child(9):hover~ .underline{
  138. 		left: 840px;
  139. 		background-color:white;
  140. 	}
  141. 	.navbar .nav ul>li:nth-child(10):hover~ .underline{
  142. 		left: 945px;
  143. 		background-color: white;
  144. 	}
  145. 	
  146. 	.navbar .nav ul>li:nth-child(11):hover~ .underline{
  147. 		left: 1045px;
  148. 		background-color: white;
  149. 	}
  150. 	.navbar .nav ul>li:nth-child(12):hover~ .underline{
  151. 		left: 1150px;
  152. 		background-color:white;
  153. 	}
  154. 	.navbar .nav ul>li:nth-child(13):hover~ .underline{
  155. 		left: 1260px;
  156. 		background-color:white;
  157. 	}
  158. 	.navbar .nav ul>li:nth-child(14):hover~ .underline{
  159. 		left: 1260px;
  160. 		background-color:white;
  161. 	}
  162. 	.bigimg{
  163. 		float: left;
  164. 		margin-top: -70px;
  165. 	}
  166. 	img{
  167. 		width: 100%;
  168. 	}
  169.

希望能帮到您！！，

我们下次见啦~~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/658737
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号