摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>导航栏下拉菜单</title> <script> var current=n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏下拉菜单</title>
<script>
var current=new Date();//获取当前本地时间
// document.write(current);//输出当前本地时间
document.write(current.getFullYear()+'年')//获取年份
//document.write(current.getMonth()+'月')//获取月份
//国外0代表1月
var month = new Array(12)
month[0]='一月'
month[1]='二月'
month[2]='三月'
month[3]='四月'
month[4]='五月'
month[5]='六月'
month[6]='七月'
month[7]='八月'
month[8]='九月'
month[9]='十月'
month[10]='十一月'
month[11]='十二月'
document.write(month[current.getMonth()])//输出当前月份
document.write('星期'+current.getDay()+'<br>')//输出星期
document.write('时间: '+current.getHours()+':')//输出小时
document.write(current.getMinutes())//输出分钟
//document.write(current.getSecond());//输出秒数
</script>
<style>
/*导航条*/
div{width: 100%;
background: #2F3E45;
height: 52px;
margin-top: 60px;
}
/*unorder 样式去除*/
ul{
list-style: none;
}
/*一级li标签左浮动*/
.nav>li{
float: left;
}
/*ul a标签相关属性*/
ul a{
display: block;/*块级元素*/
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
border: 1px solid blue;
}
/*导航栏第一级菜单第一个li标签边框第1、第4角设置为10px圆角*/
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
/*导航栏第一级菜单最后一个li标签边框第2、第3角设置为10px圆角*/
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
/*产品分类之子菜单*/
.drop-sub{
padding: 0;
display: none;
}
.drop-sub01{
padding: 0;
display: none;
}
/*浮动子菜单背景色及字体颜色*/
.drop-sub li:hover a{
background-color:purple;
}
.drop-sub01 li:hover a{
background-color:red;
}
/*产品分类hover显示子菜单*/
.nav .drop-down:hover .drop-sub{
display: block;
}
.nav .drop-down01:hover .drop-sub01{
display: block;
}
/* .nav li:hover a{color: blue;}*/
</style>
<script type="text/javascript">
function dianwo(x){
x.style.borderRadius="50px";
x.style.background="purple";
alert("^_^嘿嘿嘿嘿嘿");
x.style.width="200px"
}
function mbody(y){
y.style.background="yellow"
}
</script>
</head>
<body onmousemove="mbody(this)">
<div>
<ul class="nav">
<li><a href="#" style="width:350px;" onclick="dianwo(this)">灭绝老太等你很久了哦 来呀点我呀</a></li>
<li class="drop-down" onClick="while(1==1){alert('猪是念着倒')}"><a href="http://www.51spec.com" target="_blank">不要点我</a>
<ul class="drop-sub">
<li><a href="http://www.51spec.com" target="_blank">电气电子</a></li>
<li><a href="http://www.51spec.com" target="_blank">传感测量</a></li>
<li><a href="http://www.51spec.com" target="_blank">自动控制</a></li>
</ul>
</li>
<li class="drop-down01"><a href="http://www.51spec.com" target="_blank">品牌汇</a>
<ul class="drop-sub01">
<li><a href="http://www.51spec.com" target="_blank">霍尼韦尔</a></li>
<li><a href="http://www.51spec.com" target="_blank">高诺斯</a></li>
<li><a href="http://www.51spec.com" target="_blank">快达</a></li>
<li><a href="http://www.51spec.com" target="_blank">威图</a></li>
</ul>
</li>
<li><a href="http://www.51spec.com" target="_blank">资料下载</a></li>
<li><a href="http://www.51spec.com" target="_blank">资讯中心</a></li>
</ul>
</div>
<img src="http://t1.27270.com/uploads/tu/201809/1136/2015-08-18_70def01fgw1ev75ykwnibj22rt45qkjo.jpg" alt="对象">
</body>
</html>
批改老师：查无此人批改时间：2019-01-04 13:44:01
老师总结：做的不错，之后的作业，可以加上自己的看法，我能知道你的逻辑，完善你哪里不足。继续加油。
