運行效果：
步驟1：先把頁面搞一搞
首先，我們需要創建一個HTML頁面，把場地圖片引入進來，
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
/*設定溢位隱藏，為了沒有滾動條*/
overflow: hidden;
}
.bg {
/*設定背景為一張圖片，不重復*/
background: url(img/background1.jpg) no-repeat;
/*設定背景圖片的尺寸占滿div*/
background-size: 100%;
width: 1200px;
height: 500px;
}
</style>
</head>
<body>
<div class="bg">
</div>
</body>
</html>
效果：
注釋已經寫得很清楚了，讀者自己看下css的含義即可，不必去深究，
步驟2：相對定位
相對定位就是移動一個標簽，根據什么來移動呢？對了，就是根據它原來的位置移動，就這么簡單，比如，我現在要移動這塊場地，就這樣做：
.bg {
/*設定背景為一張圖片，不重復*/
background: url(img/background1.jpg) no-repeat;
/*設定背景圖片的尺寸占滿div*/
background-size: 100%;
width: 1200px;
height: 500px;
position: relative;/*設定相對定位*/
top: 80px;
}
可以看到場地被往下移動了80px，top代表頂部距離原來位置的長度，類似的屬性還有left，bottom，left，這個步驟只是為了展示，現在請把這一行代碼洗掉吧，
top: 80px;
步驟3：絕對定位
絕對定位的意思，可以簡單地這樣理解，就是根據某一個相對定位（relative）的標簽，從它的左上角頂點開始移動，我們來看案例：
<div class="bg">
<img class="Peashooter" src="img/Peashooter.gif">
</div>
.bg .Peashooter {
position: absolute;
top: 0;
left: 0;
}
如圖所示，豌豆射手設定了
position: absolute;
因為外層div是相對定位，因此豌豆射手就相對于外層div做絕對定位，然后我們只需要調整top和left，就可以將豌豆射手放到它該去的地方，
大概是這個位置：
代碼：
.bg .Peashooter {
position: absolute;
top: 58px;
left: 218px;
}
成功啦，好簡單哦鼓掌，吧唧吧唧，哈哈哈，學會了嗎，這就是絕對定位！
步驟4：浮動布局
所謂浮動布局，就是讓一個標簽要么左浮動，要么右浮動，讓我們重新開一個頁面吧，
<div class="wrap">
</div>
.wrap {
width: 300px;
height: 100px;
border:1px solid #666;
}
放入一個豌豆
<div class="wrap">
<img class="Peashooter" src="img/Peashooter.gif">
</div>
這種就叫做標準的檔案流，img是行內標簽，那么放置多個的時候，img也會從左往右依次排序，如果我要讓豌豆以浮動的方式靠右浮動，看一下該怎么做？
.Peashooter {
float: right;
}
可以看到，豌豆靠右邊了，接下來，我們再放一個太陽，不加浮動，
<div class="wrap">
<img class="Peashooter" src="img/Peashooter.gif">
<img src="img/Sun.gif">
</div>
可以看到，太陽是在豌豆的左邊的，這就是浮動的好處，不管其他元素怎么排列，右浮動的豌豆就是漂浮在右邊，再來說下什么叫做清除浮動？首先，我們把豌豆設定為左浮動，太陽設定為右浮動，
<div class="wrap">
<img class="Peashooter" src="img/Peashooter.gif">
<img class="Sun" src="img/Sun.gif">
</div>
.Peashooter {
float: left;
}
.Sun {
float: right;
}
然后，我們再把外層div的高度注釋掉：
發現，div變成了一條線，這是因為，當一個容器里面所有的元素都浮動了，那么容器的高度就會發生塌陷，解決辦法是清除浮動，在最后一個浮動元素后面加上這個：
<div style="clear: both;"></div>
我們看到，div的高度被里面的元素重新撐起來啦！一般我們會有一個叫做clearfix的類，專門做這個事情的，清除浮動的辦法有很多，但是我建議學這個就足夠了，我們學的是技術，不是背一本字典，
<div class="clearfix"></div>
.clearfix {
clear: both;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/382053.html
標籤：其他
上一篇：不想做CEO的程式員不是好碼農？