abstract：<!doctype html><html><head><meta charset="utf-8"><title>支持php中文网</title><link rel="shortcut icon" type="images/x-icon" href="h
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>支持php中文网</title>
<link rel="shortcut icon" type="images/x-icon" href="http://www.php.cn/static/images/logo.png" /> <!-- 设置网页头部的logo -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{padding:0px;margin:0px;background:#ccc; }
.main{ width:100%;height:60px; background:#000;}
.logo a{background:url(http://www.php.cn/static/images/logo.png) no-repeat center center; width:140px;height:60px; display:block; background-size:100%; float:left;}
ul li{ list-style:none; width:96px; height:60px; float:left;background:#000; line-height:60px;text-align:center;}
ul li a{text-decoration:none; color:#ccc; background:#000;}
ul li a:hover{background:#000; border-bottom:2px #0C0 solid;}
.nav{ color:#fff; width:96px;height:180px;}
.nav li{ border-bottom:1px solid #ccc; }
.nav2{ color:#fff; width:96px;height:180px;}
.nav2 li{ border-bottom:1px solid #ccc; }
.nav3{ color:#fff; width:96px;height:180px;}
.nav3 li{ border-bottom:1px solid #ccc; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.nav').hide();
$('.nav2').hide();
$('.nav3').hide();
$('#bt').on('click',function(){
$('.nav').animate({height:'toggle'},1500)
})
$('#bt2').on('click',function(){
$('.nav2').fadeToggle(3000);
})
$('#bt3').on('click',function(){
$('.nav3').animate({width:'toggle'},1500);
})
});
</script>
</head>
<body>
<div class="main">
<div class="logo"><a href="#"></a></div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">社区问答</a></li>
<li><a href="#" id="bt">技术文章↓</a>
<div class="nav">
<ul>
<li><a href="#">php教程</a></li>
<li><a href="#">html教程</a></li>
<li><a href="#">JQuery</a></li>
</ul>
</div>
</li>
<li><a href="#">编程词典</a></li>
<li><a href="#" id="bt2">资源下载↓</a>
<div class="nav2">
<ul>
<li><a href="#">php教程</a></li>
<li><a href="#">html教程</a></li>
<li><a href="#">JQuery</a></li>
</ul>
</div>
</li>
<li><a href="#" id="bt3">特色课程↓</a>
<div class="nav3">
<ul>
<li><a href="#">php教程</a></li>
<li><a href="#">html教程</a></li>
<li><a href="#">JQuery</a></li>
</ul>
</li>
<li><a href="#">菜鸟学堂</a></li>
</ul>
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-06-19 09:11:16
Teacher's summary：完成的不错。可以看看搜下网页动态，有很多好看的效果。继续加油