第二次web前端作业（西安欧鹏）
目录：
（当时课只用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>效果如图：
