abstract：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css小總結(jié)2</title> <style type="text/css"> *{ mar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css小總結(jié)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、行內(nèi)元素與塊級元素之間的相互轉(zhuǎn)換</h3>
<p class="ph1">塊級元素轉(zhuǎn)換為行內(nèi)元素</p>
<span>fsdfjadjfop</span>
<span class="sp1">行內(nèi)元素轉(zhuǎn)換為塊級元素</span>
<p class="ph2">塊級元素轉(zhuǎn)換為行內(nèi)塊元素</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>前端開發(fā)</li>
<li>php</li>
<li>UI設(shè)計</li>
<li>數(shù)據(jù)庫開發(fā)</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>
Correcting teacher：韋小寶Correction time：2019-02-20 09:12:28
Teacher's summary：寫的很不錯 css中的浮動在實際的開發(fā)中是必不可少的 但是使用多了還要記得清除浮動哦！