1. 理解并写出外边距的三个特征: 同级塌陷,嵌套传递,自动挤压的案例;
2. 写案例,并分析内边距对盒中内容的影响,以及解决的三种方案是什么?
3. 浮动的实现原理与清除的技巧
4. 相对定位与绝对定位的区别与联系,并实例演示
5. 模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0;
color: #424242;
font-family: Arial;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position: absolute;
width: 100px;
height: 100px;
border:10px solid black;
border-radius: 50%;
}
.plat{
position: absolute;
left: 50%;
top: 50%;
margin-left: -193px;
margin-top: -93px;
height: 185px;
width: 380px;
}
.circle1{
border-color: red;
left: 0;
top: 0;
}
.circle2{
border-color: green;
left:130px;
top: 0px;
}
.circle3{
border-color: aqua;
left: 260px;
top: 0px;
}
.circle4{
border-color: blue;
left:65px;
top: 60px;
}
.circle5{
border-color:black;
left: 195px;
top: 60px;
}
.nav{
list-style-type: none;
}
.list-item{
float: left;
margin: 0px 10px;
height: 30px;
line-height:30px;
}
a{
text-decoration: none;
}
/*清除浮动*/
.nav::after{
content:"";
display:block;
clear: both;
}
.nav .list-item a{
padding: 0 5px;
font-weight: bold;
color: #f40;
font-weight:bold;
display:inline-block ;
}
.nav .list-item a:hover{
background: #f40;
color:#fff;
border-radius: 15px;
}
</style>
</head>
<body>
<ul class="nav">
<li class="list-item"><a href="#">天猫超市</a></li>
<li class="list-item"><a href="#">天猫国际</a></li>
<li class="list-item"><a href="#">天猫会员</a></li>
</ul>
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例