第二次web前端作业（西安欧鹏）-优快云博客

本文链接：https://blog.youkuaiyun.com/ghostd4/article/details/143563092

（当时课只用css与html）制作带有下拉悬停菜单的导航栏（模板）

步骤1创造style标签里的css标签和body标签中的div标签

步骤2 进行子代选择器的编辑

步骤3 加入动画效果

步骤4 把那一连串div标签进行复制实现图中效果

完整代码如下

（当时课只用css与html）制作带有下拉悬停菜单的导航栏（模板）

思路使用CSS标签进行下拉悬停菜单导航栏的功能设置，利用div来做出导航栏里的文字。

步骤1创造style标签里的css标签和body标签中的div标签

div标签有导航栏下拉的div标签为：

                     <div>游戏下载</div>
					 <div>游戏交易</div>
					 <div>游戏辅助</div>
					 <div>游戏攻略</div>

然后创造menu div标签

<div id="menu">

在<body>标签中加入css标签名字为#menu

#menu{
				background-color: #4F7285;
				width: 100%;
				height: 50px; 
			}

然后在body加入导航栏的宽度的div标签为container

<div id="container">

然后在style标签中加入css样式是container

#container{
				width: 10000000px; 
			}

然后在body加入item的div标签为

<div class="item">

在style标签中在加入css样式为item的标签

.item{
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				/* border: 1px solid red; */ /*这串代码border来检测边框是否对齐*/
				text-align: center;
				color: black;
				position: relative;
			}

在下拉菜单的div标签上

                     <div>游戏下载</div>
					 <div>游戏交易</div>
					 <div>游戏辅助</div>
					 <div>游戏攻略</div>

在div标签上加入down_menu

<div id="down_menu">

在style标签中加入css样式为down_menu作为下拉菜单的设定

#down_menu{
				background-color: #cccccc;
				display: none;
				position: absolute;
			}

这一串div标签

<div id="menu">
			 <div id="container">
				 <div class="item">使命召唤
				 <div id="down_menu">
					 <div>游戏下载</div>
					 <div>游戏交易</div>
					 <div>游戏辅助</div>
					 <div>游戏攻略</div>
				 </div>
			 </div>

就有了基本的效果

步骤2 进行子代选择器的编辑

在css标签中加入子代选择器

#down_menu>div{
				color: black;
			}

.item:hover>#down_menu{
				display: block;
				width: 90px;
			}

item设置为hover属性

.item:hover{
				background-color: #4F7285;
			}

这样就能在鼠标悬停在主菜单上自动下拉出导航栏效果

步骤3 加入动画效果

当鼠标指针悬停到文字上会出现白色阴影效果

css属性为：

div:hover{
				color: white;
				background-color: skyblue;
				text-shadow: 3px 3px 5px whitesmoke,
				-3px 3px 5px whitesmoke,
				3px -3px 5px white,
				-3px -3px 5px white;
				transition: 1s;
				}

步骤4 把那一连串div标签进行复制实现图中效果

div标签

<div id="menu">
			 <div id="container">
				 <div class="item">/*输入想输入的文字*/
				 <div id="down_menu">
					 <div>/*输入想输入的文字*/</div>
					 <div>/*输入想输入的文字*/</div>
					 <div>/*输入想输入的文字*/</div>
					 <div>/*输入想输入的文字*/</div>
				 </div>
			 </div>

完整代码如下

<!-- 模仿3dm网站的导航栏 上面放点图片加点链接即可 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				margin: 0;
			}
			#menu{
				background-color: #4F7285;
				width: 100%;
				height: 50px;
			}
			.item{
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				/* border: 1px solid red; */
				text-align: center;
				color: black;
				position: relative;
			}
			.item:hover{
				background-color: #4F7285;
			}
			#container{
				width: 10000000px;
			}
			#down_menu>div{
				color: black;
			}
			#down_menu{
				background-color: #cccccc;
				display: none;
				position: absolute;
			}
			.item:hover>#down_menu{
				display: block;
				width: 90px;
			}
			div:hover{
				color: white;
				background-color: skyblue;
				text-shadow: 3px 3px 5px whitesmoke,
				-3px 3px 5px whitesmoke,
				3px -3px 5px white,
				-3px -3px 5px white;
				transition: 1s;
				}
				
		</style>
	</head>
	<body>
		<div id="menu">
			 <div id="container">
				 <div class="item">使命召唤
				 <div id="down_menu">
					 <div>游戏下载</div>
					 <div>游戏交易</div>
					 <div>游戏辅助</div>
					 <div>游戏攻略</div>
				 </div>
			 </div>
			 <div id="menu">
			 	 <div id="container">
			 		 <div class="item">赛博朋克
			 		 <div id="down_menu">
			 			 <div>游戏下载</div>
			 			 <div>游戏交易</div>
			 			 <div>游戏辅助</div>
			 			 <div>游戏攻略</div>
			 		 </div>
			 	 </div>
				 <div id="menu">
				 	 <div id="container">
				 		 <div class="item">战地系列
				 		 <div id="down_menu">
				 			 <div>游戏下载</div>
				 			 <div>游戏交易</div>
				 			 <div>游戏辅助</div>
				 			 <div>游戏攻略</div>
				 		 </div>
				 	 </div>
					 <div id="menu">
					 	 <div id="container">
					 		 <div class="item">英雄联盟
					 		 <div id="down_menu">
					 			 <div>游戏下载</div>
					 			 <div>游戏交易</div>
					 			 <div>游戏辅助</div>
					 			 <div>游戏攻略</div>
					 		 </div>
					 	 </div>
						 <div id="menu">
						 	 <div id="container">
						 		 <div class="item">荣耀战魂
						 		 <div id="down_menu">
						 			 <div>游戏下载</div>
						 			 <div>游戏交易</div>
						 			 <div>游戏辅助</div>
						 			 <div>游戏攻略</div>
						 		 </div>
						 	 </div>
							 <div id="menu">
							 	 <div id="container">
							 		 <div class="item">三角洲行动
							 		 <div id="down_menu">
							 			 <div>游戏下载</div>
							 			 <div>游戏交易</div>
							 			 <div>游戏辅助</div>
							 			 <div>游戏攻略</div>
							 		 </div>
							 	 </div>
							 	 <div id="menu">
							 	 	 <div id="container">
							 	 		 <div class="item">守望先锋
							 	 		 <div id="down_menu">
							 	 			 <div>游戏下载</div>
							 	 			 <div>游戏交易</div>
							 	 			 <div>游戏辅助</div>
							 	 			 <div>游戏攻略</div>
							 	 		 </div>
							 	 	 </div>
							 		 <div id="menu">
							 		 	 <div id="container">
							 		 		 <div class="item">荣誉勋章
							 		 		 <div id="down_menu">
							 		 			 <div>游戏下载</div>
							 		 			 <div>游戏交易</div>
							 		 			 <div>游戏辅助</div>
							 		 			 <div>游戏攻略</div>
							 		 		 </div>
							 		 	 </div>
							 			 <div id="menu">
							 			 	 <div id="container">
							 			 		 <div class="item">镜之边缘
							 			 		 <div id="down_menu">
							 			 			 <div>游戏下载</div>
							 			 			 <div>游戏交易</div>
							 			 			 <div>游戏辅助</div>
							 			 			 <div>游戏攻略</div>
							 			 		 </div>
							 			 	 </div>
							 				 <div id="menu">
							 				 	 <div id="container">
							 				 		 <div class="item">APEX
							 				 		 <div id="down_menu">
							 				 			 <div>游戏下载</div>
							 				 			 <div>游戏交易</div>
							 				 			 <div>游戏辅助</div>
							 				 			 <div>游戏攻略</div>
							 				 		 </div>
							 				 	 </div>
												 <div id="menu">
												 	 <div id="container">
												 		 <div class="item">逆战
												 		 <div id="down_menu">
												 			 <div>游戏下载</div>
												 			 <div>游戏交易</div>
												 			 <div>游戏辅助</div>
												 			 <div>游戏攻略</div>
												 		 </div>
			</div>
		</div>
	</body>
</html>

效果如图：