摘要：在css的学习中让我们学会了怎么浮动以及清除浮动、文本居中、相对定位、绝对定位、去除内标列的样式、转换元素、控制阴影、边框、内边距以及外边、让我们初始的认识了css，也学会了一些简单的布局，感谢灭绝老师的教导。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>
在css的学习中让我们学会了怎么浮动以及清除浮动、文本居中、相对定位、绝对定位、去除内标列的样式、转换元素、控制阴影、边框、内边距以及外边、让我们初始的认识了css，也学会了一些简单的布局，感谢灭绝老师的教导。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index/css">
<link rel="shortcut" type="image/X-icon" href="image/1.jpg">
<style type="text/css">
*{padding: 0px;margin: 0px;}
.top ul li{width: 100px;height: 40px;background-color: red;line-height: 40px;margin: 5px 0px;list-style:none;border: 1px solid #2EB8FF;float: left;text-align: center;margin: 5px 0px;b}
.red{clear: both;}
.red .red_a{float: left;width: 100px;height: 50px;background-color: #ccc;}
.red .red_b{float: left;width: 100px;height: 50px;background-color: pink;}
.red .red_c{float: left;width: 100px;height: 50px;background-color: red;}
.dw{/* width: 300px;height: 300px; background-color: #fff; */clear: both;position: relative;/* padding-top: 50px; */}
.dw .dw_a{width: 500px;height: 500px; background-color: #9E5E68;position: absolute;left: 20px;top: 20px;}
.dw .dw_b{width: 400px;height: 400px; background-color: pink;position: absolute;left: 70px;top: 70px;}
.dw .dw_c{width: 300px;height: 300px; background-color: red;position: absolute;left: 120px;top: 120px;}
</style>
</head>
<body>
<div>
<ul>
<li>首页</li>
<li>博客</li>
<li>微博</li>
<li>微信</li>
<li>腾讯</li>
</ul>
</div>
<div>
<div class="red">
<div class="red_a">1</div>
<div class="red_b">2</div>
<div class="red_c">3</div>
</div>
<div class="dw">
<div class="dw_a"></div>
<div class="dw_b"></div>
<div class="dw_c"></div>
</div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-05 13:36:48
老师总结：浮动能完成的事,使用绝对定位,基本上都可以完成, 在实现的布局上,首选定位,浮动推荐放在图文混排中实用
