摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CCS基础及样式控制</title> <style type="text/css"> *{margin: 0;padding: 0;} .header{wi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CCS基础及样式控制</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.header{width: 1000px;height: 150px;margin: auto;box-shadow:0px 5px 30px #ccc;margin-top: 10px;line-height: 150px;font-size: 50px}
.menu{width: 1000px;height: 40px; margin: 20px auto;box-shadow: 0px 5px 30px #ccc;}
div.menu ul li:hover{background-color: #11EE96;}
ul li{list-style: none;}
div.menu1 ul li{width: 100px;height: 40px;line-height:40px; text-align: center;float: left;}
div.menu2 ul li{width: 100px;height: 40px;line-height:40px; text-align: center;float: right;}
.banner{width: 1000px;height: 500px; margin: 20px auto;box-shadow: 0px 5px 30px #ccc;border-radius:10px;position: relative;}
.banner-menu{float: left;width: 300px;height:500px;}
.banner1{width: 500px;height: 400px;background-color: #48D1CC;display: none;position: absolute;left: 300px;top: 0;}
div.banner-menu ul li{width: 300px;height:100px;line-height:40px; text-align: center; background-color: #01100A;color: #fff;line-height: 100px;text-align:center;}
div.banner-menu ul li:hover{background:#11EE96;}
div.banner-menu ul li:hover .banner1{display: block;}
</style>
</head>
<body>
<div class="header">PHP中文网</div>
<div class="menu">
<div class="menu1">
<ul>
<li>首页</li>
<li>HTML</li>
<li>CCS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</div>
<div class="menu2">
<ul >
<li>登录</li>
<li>注册</li>
</ul>
</div>
</div>
<div class="banner">
<div class="banner-menu">
<ul>
<li>PHP开发<div class="banner1">PHP开发</div></li>
<li>前端开发<div class="banner1">前端开发</div></li>
<li>后端开发<div class="banner1">后端开发</div></li>
<li>移动开发<div class="banner1">移动开发</div></li>
<li>数据库<div class="banner1">数据库</div></li>
</ul>
</div>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2018-12-25 09:10:50
老师总结：写的很不错！课后记得要多多练习哦！！继续加油吧！
