宋柏霖的第四个作业
<!DOCTYPE html>
<html>
<head>
<!--设置字符编码-->
<meta charset="UTF-8">
<!--设置网页标题-->
<title>CSS样式</title>
<style>
*{margin:0px;padding: 0px;}
body{background:url(images/logo.jpg) no-repeat center top;}
.bk{width: 100px;height: 40px; border:1px solid #ccc; border-radius: 10px; background: blue; box-shadow:#ccc 5px 3px 2px;}
button{border: none;background: #E5AF46; width: 100px; height:20px;}
.box{width: 100px; height: 40px; background: pink; line-height: 40px ;text-align: center; }
.main{width: 100px; height:100px; background-color: #F4B5E2; line-height:100px ;text-align: center; display: none; }
.box:hover .main {display: block;}
a{color: red; text-decoration: none; }
a:hover{color: #000;}
.dw{width: 1000px;height:1000px; background: #ccc; position:relative;top:50px;}
.dw2{width: 512px; height: 512px; background:url("images/logo1.jpg");position: absolute;left:500px;}
ul li {list-style:none;height: 20px;width: 100px;background-color: #E5AF46; text-align: center; line-height: 20px;margin:0px 0px 0px 0px; float: left;}
.box1{width: 200px;height: 200px;background-color: #ccc; float: left;}
.clear{clear: both;}
</style>
<!--调用icon图片以及css样式-->
</head>
<div class="bk"></div>
<button>提交</button>
<div class="box">导航
<div class="main"><a href="http://www.php.cn">PHP中文网</a></div>
<div class="main"><a href="http://www.php.cn">PHP中文网</a></div>
</div>
<div class="dw">
<div class="dw2"></div>
</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<div class="clear"></div>
<div class="box1">111</div>
<div class="box1">222</div>
<div class="box1">333</div>
</body>
</html>