<style>
/*盒子布局*/
.div1,.div2{
100px;
height: 100px;
background-color: #7FFF00;
}
.div2{
background-color: #8A2BE2;
/*padding-top: 50px;
margin-left: 50px;*/
margin: 100px 0px 0px 50px;
}
/*小广告*/
.div3{
100px;
height: 100px;
background-color: #DEB887;
/*定位*/ /*position位置 fixed浮动定位*/
position: fixed;
bottom: 0px;
right: 0px;
}
/*相对定位*/
.div-class{
100px;
height: 100px;
background-color: #DC143C;
/*定位*/ /*relative相对定位*/
position: relative;
}
.absolute{
text-align: center;
line-height:10px;
10px;
height: 10px;
background-color:#00FFFF;
/*绝对定位*/
position: absolute;
top: 0px;
right: 0px;
}
.absolute:hover{
cursor: pointer;
}
/*分层*/
.div,.div9{
200px;
height: 200px;
background-color: aquamarine;
border: 2px solid #7FFF00;
}
.div{
z-index: 20;
}
.div9{
background-color: #A52A2A;
margin-top: -30px;
z-index: 10;
}
.bab{
70%;
height: 100px;
border: 1px solid #00FFFF;
overflow: hidden;
}
.son{
50px;
height: 50px;
background-color: #DEB887;
border: 1px solid chartreuse;
/*流式布局*/
float: left;
}
</style>
</head>
<body>
<!--盒子布局-->
<!--<div class="div1"></div>
<div class="div2">哈哈哈</div>-->
<!--页面布局-->
<!--浮动效果-->
<div class="div3"><a href="http://www.didian.com" target="_blank"><img
src="../开始/img/67faf1845e576ede89abee8243e91b6f.gif"
width="100px" height="100px"/></a>
<div class="absolute">×
</div>
</div>
<!--相对定位-->
<div class="div-class"></div>
<!--绝对定位-->
<div class="absolute"></div>
<div class="div-class">
<div class="absolute"></div>
</div>
<!--分层-->
<div class="div"></div>
<div class="div9"></div>
<!--流式布局-->
<div class="bab">
<div class="son">好</div>
<div class="son">哈</div>
<div class="son">还</div>
<div class="son">和</div>
<div class="son">回</div>
<div class="son">行</div>
<div class="son">就</div>
<div class="son">啊</div>
<div class="son">去</div>
<div class="son">我</div>
<div class="son">在</div>
<div class="son">啊</div>
<div class="son">不</div>
<div class="son">你</div>
<div class="son">吗</div>
</div>
<div>花花哈</div><div>花花哈</div><div>花花哈</div>
<div>花花哈</div><div>花花哈</div><div>花花哈</div>
<div>花花哈</div><div>花花哈</div><div>花花哈</div>
<div>花花哈</div><div>花花哈</div><div>花花哈</div>
<div>花花哈</div><div>花花哈</div><div>花花哈</div>
<div>花花哈</div><div>花花哈</div><div>花花哈</div>
<div>花花哈</div><div>花花哈</div><div>花花哈</div>
</body>
</html>