遇到以上的不規則案例布局，如果使用float、padding等浮動實現比較麻煩，但使用position絕對位置即可很好簡單地實現。接下來為大家介紹position絕對位置方法布局以上小的案例。
用到CSS樣式和HTML標籤及相應解釋
1、要用到CSS樣式單詞及解釋
position：絕對位置樣式實現DIV定位布局其設定值absolute和relative應用
width：寬度，設定對象寬度
height：高度，設定對象高度
line-height：行高，設定文本行高
left：設定div對象靠左距離
right：設定div對象靠左距離
top：設定div對象靠左距離
bottom：設定div對象靠左距離
background：背景，設定背景圖片和顏色
color：設定字型顏色
font-size：設定字型大小
font-weight：設定字型加粗
2、用到HTML標籤及解釋
div標籤：用於布局結構架構
ul li標籤：用於布局列表型資料列表
h3標籤：用於布局欄目標題
絕對位置實際案例布局思維解釋介紹
將隱藏文字後整圖作為最外層大盒子DIV的背景圖片，命名為bg.jpg。
隱藏文字後的圖片素材，可直接儲存使用
隱藏文字後的圖片素材，可直接儲存使用
這一個最外層DIV，設定好寬度高度、背景圖片，同時設定position:relative。此盒子裡分別布局3個小DIV盒子，分別設定好寬度高度，同時設定position:absolute絕對位置再使用left、right、top、bottom這幾個樣式定位好這3個盒子位置。
通過以上布局即可布局好三個DIV盒子，再分別布局欄目標題和內容即可實現。
絕對位置案例重要代碼
以下是最外層DIV盒子及CSS代碼和內容3個小盒子布局代碼。
1、HTML代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>絕對位置 執行個體線上示範 DIV </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html> 以上HTML布局一個大盒子使用ID，裡面三個小DIV盒子使用CLASS。2、CSS代碼#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} /* position:relative是絕對位置關鍵，父級設定 */ .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}
從以看出布局結構初現。再以上基礎上分別布局欄目標題和對應內容即可完成此布局。
1、完整CSS代碼
@charset "utf-8"; body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} /* \5B8B\4F53 代表 宋體，更多中文字型轉 Unicode http://www.php.com/jiqiao/j325.shtml */ ol, ul ,li{list-style:none} img {border: 0; vertical-align:middle} body{color:#FFF;background:#FFF; text-align:center} a{color:#FFF;text-decoration:none} a:hover{color:#BA2636;text-decoration:underline} /* 根據本執行個體 設定超連結字型與沒有超連結字型示範為白色 */ #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} /* position:relative是絕對位置關鍵，父級設定 */ .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} /* position:absolute是絕對位置關鍵，子級設定同時lef right top bottom配合使用 */ h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left} /* 標題統一設定 */ ul.list{ text-align:left; width:100%; padding-top:8px} ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden} /* 加了overflow:hidden防止內容過多後自動換行 隱藏超出內容 */
2、完整HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>絕對位置 執行個體線上示範 DIV </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!--www.php.com --> </head> <body> <div id="wrapper"> <div class="box1"> <h3 class="title">新聞動態</h3> <ul class="list"> <li><a href="http://www.php.com/wenji/w558.shtml">不會程式能學會CSS嗎？</a></li> <li><a href="http://www.php.com/wenji/w556.shtml">DIVCSS學習難嗎？</a></li> <li><a href="http://www.php.com/peixun/">我要參加DIVCSS5的培訓</a></li> <li><a href="http://www.php.com/css-tool/t720.shtml">jQuery所以版本集合整理</a></li> </ul> </div> <div class="box2"> <h3 class="title">DIV 欄目</h3> <ul class="list"> <li><a href="http://www.php.com/html/">CSS基礎教程</a></li> <li><a href="http://www.php.com/htmlrumen/">HTML基礎教程</a></li> <li><a href="http://www.php.com/wenji/">CSS問題</a></li> <li><a href="http://www.php.com/css-tool/">CSS製作工具</a></li> <li><a href="http://www.php.com/jiqiao/">DIV CSS技巧</a></li> <li><a href="http://www.php.com/css-texiao/">DIV+CSS+JS特效</a></li> </ul> </div> <div class="box3"> <h3 class="title">網站欄目</h3> <ul class="list"> <li><a href="http://www.php.com/cssrumen/">DIV CSS入門</a></li> <li><a href="http://www.php.com/htmlrumen/">HTML入門教程</a></li> <li><a href="http://www.php.com/shili/">CSS執行個體</a></li> <li><a href="http://www.php.com/">DIV首頁</a></li> <li><a href="http://www.php.com/template/">DIV CSS模組模板</a></li> <li><a href="http://www.php.com/w3c/">DIV CSS WEB標準</a></li> </ul> </div> </div> </body> </html>
關於CSS的布局的案列講解就是這麼多了，需要的朋友可以儲存一下，也請大家持續關注本站的其他更新。
相關閱讀：
Div和CSS 該怎樣學習
css的position怎麼使用
CSS的min-width和max-width怎麼設定
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
