css小总结2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css小总结2</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.box1{
width:500px;
height:200px;
background-color:#ccc;
}
.box2{
width:100%;
height:300px;
background-image:url(images/1.png);
background-repeat:repeat-x;
}
.box3{
width:43px;
height:43px;
background-image:url(images/common2.png);
background-repeat:no-repeat;
background-position:-7px -60px;
}
.box4{
width:100%;
height:300px;
background:url(images/1.png) no-repeat center top;
}
.ph1{display:inline;}
.sp1{
display: block;
width: 300px;
height: 50px;
background-color:#ccc;
}
.ph2{
width:300px;
height:40px;
background-color:#eee;
display:inline-block;
}
.box5{
margin:auto;
padding:0px;
width:100px;
height:40px;
text-align:center;
line-height:40px;
background-color:#ccc;
}
.box6{
margin:auto;
padding:0px;
width:100px;
height:40px;
text-align:center;
line-height:40px;
background-color:#eee;
display:none;
}
.box5:hover .box6{display:block;}
.box7{
width:300px;
height:200px;
background-color:pink;
position:relative;top:20px;right:30px;
}
.box8{
width:30px;
height:30px;
background:url(images/4.png);
position:absolute;top:1px; right:1px;
}
ul li{
width:120px;
height:40px;
line-height:40px;
text-align:center;
background-color:#ccc;
list-style:none;
margin:20px 5px;
float:left;
}
.box9{
width:120px;
height:100px;
margin:10px;
text-align:center;
line-height:100px;
background-color:pink;
float:right;
}
.box10{clear:both;}
</style>
</head>
<body>
<h3>1、背景颜色、背景图片：平铺效果、位置、复合写法</h3>
<div class="box1">背景颜色</div>
<div class="box2">背景图片</div>
<div class="box3"></div>
<div class="box4"></div>
<hr />
<h3>2、行内元素与块级元素之间的相互转换</h3>
<p class="ph1">块级元素转换为行内元素</p>
<span>fsdfjadjfop</span>
<span class="sp1">行内元素转换为块级元素</span>
<p class="ph2">块级元素转换为行内块元素</p>
<span>fsdfjadjfop</span>
<hr />
<h3>3、css中的定位</h3>
<p>下拉导航</p>
<div class="box5">主导航
<div class="box6">子导航1</div>
<div class="box6">子导航2</div>
</div>
<hr />
<div class="box7">
<div class="box8"></div>
</div>
<hr />
<h3 style="margin-top:60px;">4、css中的浮动</h3>
<ul>
<li>前端开发</li>
<li>php</li>
<li>UI设计</li>
<li>数据库开发</li>
</ul>
<div class="box10"></div>
<div class="box9">1</div>
<div class="box9">2</div>
<div class="box9">3</div>
<div class="box10"></div>
<hr />
<br /><br />
</body>
<html>