歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

DIVCSS5為大家實例講解絕對定位布局。絕對定位我們要用到樣式position:absoluteposition:relative,同時需要top、bottom、left、right配合布局實現DIV絕對定位。通過真實案例演示與介紹絕對定位布局方法技術。

Css div絕對定位案例截圖
Css div絕對定位案例截圖

遇到以上的不規則案例布局,如果使用floatpadding等浮動實現比較麻煩,但使用position絕對定位即可很好簡單地實現。接下來DIVCSS5為大家介紹position絕對定位方法布局以上小的案例。

一、用到CSS樣式和HTML標簽及相應解釋   -   TOP

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標簽:用于布局欄目標題

二、絕對定位實際案例布局思維解釋介紹   -   TOP

DIVCSS5將隱藏文字后整圖作為最外層大盒子DIV的背景圖片,命名為bg.jpg。

隱藏文字后的圖片素材,可直接保存使用
隱藏文字后的圖片素材,可直接保存使用

這一個最外層DIV,設置好寬度高度、背景圖片,同時設置position:relative。此盒子里分別布局3個小DIV盒子,分別設置好寬度高度,同時設置position:absolute絕對定位再使用left、right、top、bottom這幾個樣式定位好這3個盒子位置。

通過以上布局即可布局好三個DIV盒子,再分別布局欄目標題和內容即可實現。

同時此案例我們會在DIVCSS5提供的免費初始化模板基礎上進行布局,以便兼容各大瀏覽器。

三、絕對定位案例重要代碼   -   TOP

以下是最外層DIV盒子及CSS代碼和內容3個小盒子布局代碼。

1、HTML代碼

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>絕對定位 實例在線演示 DIVCSS5</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.khijtf.live --> 
  8. </head> 
  9. <body> 
  10. <div id="wrapper"> 
  11. <div class="box1"></div> 
  12. <div class="box2"></div> 
  13. <div class="box3"></div> 
  14. </div> 
  15. </body> 
  16. </html> 

以上HTML布局一個大盒子使用ID,里面三個小DIV盒子使用CLASS。

2、CSS代碼

  1. #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 
  2. /* position:relative是絕對定位關鍵,父級設置 */ 
  3. .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 
  4. .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 
  5. .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} 
  6. /* 三個小盒子使用position:relative同時設置寬度 高度 left right top bottom實現布局與準確定位 */ 

特別說明:以上三個小盒子絕對定位寬度、高度、top、left、right、bottom的準確值必須通過PS軟件獲得,相信參加DIVCSS5培訓同學通過上課已經學會獲取各屬性和值的方法。(DIVCSS5課堂中介紹和視頻操作演示過各值PS如何獲得的技術技巧)這里就不再詳細介紹與講解。

3、大概效果截圖

在DW軟件中效果截圖
在DW軟件中效果截圖

從以上圖看出布局結構初現。再以上基礎上分別布局欄目標題和對應內容即可完成此布局。

四、完整案例代碼   -   TOP

1、完整CSS代碼

  1. @charset "utf-8"; 
  2. /* DIVCSS5-CSS初始化模板-www.khijtf.live */ 
  3. body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
  4. /* \5B8B\4F53 代表 宋體,更多中文字體轉 Unicode http://www.khijtf.live/jiqiao/j325.shtml */ 
  5. ol, ul ,li{list-style:none} 
  6. img {border: 0; vertical-align:middle} 
  7. body{color:#FFF;background:#FFF; text-align:center} 
  8. a{color:#FFF;text-decoration:none}  
  9. a:hover{color:#BA2636;text-decoration:underline} 
  10. /* 根據本實例 設置超鏈接字體與沒有超鏈接字體演示為白色 */ 
  11.  
  12. #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 
  13. /* position:relative是絕對定位關鍵,父級設置 */ 
  14.  
  15. .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 
  16. .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 
  17. .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} 
  18. /* position:absolute是絕對定位關鍵,子級設置同時lef right top bottom配合使用 */ 
  19.  
  20. h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left} 
  21. /* 標題統一設置 */ 
  22. ul.list{ text-align:left; width:100%; padding-top:8px} 
  23. ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden} 
  24. /* 加了overflow:hidden防止內容過多后自動換行 隱藏超出內容 */ 

2、完整HTML代碼

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>絕對定位 實例在線演示 DIVCSS5</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.khijtf.live --> 
  8. </head> 
  9. <body> 
  10. <div id="wrapper"> 
  11. <div class="box1"> 
  12. <h3 class="title">新聞動態</h3> 
  13. <ul class="list"> 
  14. <li><a href="http://www.khijtf.live/wenji/w558.shtml">不會程序能學會CSS嗎?</a></li> 
  15. <li><a href="http://www.khijtf.live/wenji/w556.shtml">DIVCSS學習難嗎?</a></li> 
  16. <li><a href="http://www.khijtf.live/peixun/">我要參加DIVCSS5的培訓</a></li> 
  17. <li><a href="http://www.khijtf.live/css-tool/t720.shtml">jQuery所以版本集合整理</a></li> 
  18. </ul> 
  19. </div> 
  20. <div class="box2"> 
  21. <h3 class="title">DIVCSS5欄目</h3> 
  22. <ul class="list"> 
  23. <li><a href="http://www.khijtf.live/html/">CSS基礎教程</a></li> 
  24. <li><a href="http://www.khijtf.live/htmlrumen/">HTML基礎教程</a></li> 
  25. <li><a href="http://www.khijtf.live/wenji/">CSS問題</a></li> 
  26. <li><a href="http://www.khijtf.live/css-tool/">CSS制作工具</a></li> 
  27. <li><a href="http://www.khijtf.live/jiqiao/">DIV CSS技巧</a></li> 
  28. <li><a href="http://www.khijtf.live/css-texiao/">DIV+CSS+JS特效</a></li> 
  29. </ul> 
  30. </div> 
  31. <div class="box3"> 
  32. <h3 class="title">網站欄目</h3> 
  33. <ul class="list"> 
  34. <li><a href="http://www.khijtf.live/cssrumen/">DIV CSS入門</a></li> 
  35. <li><a href="http://www.khijtf.live/htmlrumen/">HTML入門教程</a></li> 
  36. <li><a href="http://www.khijtf.live/shili/">CSS實例</a></li> 
  37. <li><a href="http://www.khijtf.live/">DIVCSS5首頁</a></li> 
  38. <li><a href="http://www.khijtf.live/template/">DIV CSS模塊模板</a></li> 
  39. <li><a href="http://www.khijtf.live/w3c/">DIV CSS WEB標準</a></li> 
  40. </ul> 
  41. </div> 
  42. </div> 
  43. </body> 
  44. </html> 

3、效果截圖

CSS實例最終瀏覽器效果截圖
CSS實例最終瀏覽器效果截圖

五、CSS實例演示與下載   -   TOP

1、在線演示

查看案例

2、完整案例下載(包括HTML+CSS+PSD文件)

六、DIVCSS實例總結   -   TOP

以上實例主要使用position絕對定位樣式使用,通過position實現絕對定位布局。同時此案例還用到了H3、UL LI標簽進行布局。希望大家一定親自實踐,這樣才算真正掌握。從自己實踐中會體會到真正DIV CSS布局技巧方法。

查看另外一個div css絕對定位案例

如需轉載,請注明文章出處和來源網址:http://www.khijtf.live/shili/s730.shtml

江西多乐彩走势图今天