溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

DIV CSS絕對定位布局的方法

發(fā)布時間：2022-03-04 10:38:30 來源：億速云 閱讀：258 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“DIV CSS絕對定位布局的方法”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“DIV CSS絕對定位布局的方法”文章能幫助大家解決問題。

一、用到CSS名堂和HTML標簽及相應(yīng)講明

1、要用到CSS花式單詞及講明
position：絕對定位花式完成DIV定位結(jié)構(gòu)其設(shè)置值absolute與relative運用
width：寬度，配置對象寬度
height：高度，設(shè)置對象高度
line-height：行高，配置文本行高
left：配置div對象靠左距離
right：配置div對象靠左間隔
top：配置div對象靠左隔絕距離
bottom：配置div對象靠左隔斷
bac公斤round：靠山，設(shè)置裝備擺設(shè)后援圖片與色調(diào)
color：配置字體色彩
font-size：配置字體大小
font-weight：設(shè)置字體加粗

2、用到HTML標簽及詮釋
div標簽：用于構(gòu)造結(jié)構(gòu)框架
ul li標簽：用于布局列表型數(shù)據(jù)列表
h4標簽：用于布局欄指標題

二、相對于定位現(xiàn)實案例組織思維講明先容

CSS5將潛伏翰墨后整圖作為最外層大盒子DIV的后盾圖片，命名為bg.jpg。

DIV CSS絕對定位布局的方法
潛伏筆墨后的圖片素材，可直接糊口生涯使用

這一個最外層DIV，設(shè)置好寬度高度、靠山圖片，同時設(shè)置裝備擺設(shè)position:relative。此盒子里分袂布局3個小DIV盒子，分袂設(shè)置裝備擺設(shè)好寬度高度，同時設(shè)置position:absolute相對定位再使用left、right、top、bottom這幾個花色定位好這3個盒子地位。

顛末以上組織便可結(jié)構(gòu)好三個DIV盒子，再分袂構(gòu)造欄指標題與內(nèi)容便可實現(xiàn)。

同時此案例咱們可在CSS5提供的收費初始化模板根蒂前程行機關(guān)，以便兼容各大涉獵器。

三、相對于定位案例需要代碼

下列是最外層DIV盒子及CSS代碼與內(nèi)容3個小盒子機關(guān)代碼。

1、HTML代碼


  1. <!DOCTYPE html> 

  2. <html> 

  3. <head> 

  4. <meta charset="utf-8" /> 

  5. <title>絕對定位 實例在線演示 CSS5</title> 

  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 

  7. <!-- css5.com.cn --> 

  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構(gòu)造一個大盒子使用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是相對定位環(huán)節(jié)，父級配置 */ 

  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實現(xiàn)構(gòu)造與準肯定位 */ 

額定闡明：以上三個小盒子相對定位寬度、高度、top、left、right、bottom的準確值必需顛末PS軟件失去，置信退出CSS5培訓同硯通過上課曾經(jīng)學會獲取各屬性和值的門徑。（CSS5課堂中引見和視頻哄騙演示過各值PS若何獲取的技能手法）這里就不再具體先容與教學。

3、大要造詣截圖

DIV CSS絕對定位布局的方法 在DW軟件中成績截圖

從以上圖看出布局結(jié)構(gòu)初現(xiàn)。再以上根抵上分袂機關(guān)欄目題目與對應(yīng)模式便可完成此機關(guān)。

四、殘缺案例代碼

1、完整CSS代碼


  1. @charset "utf-8"; 

  2. /* CSS5-CSS初始化模板-css5.com.cn */ 

  3. body, div, ul, li,h4{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 

  4. /* \5B8B\4F53 代表 宋體，更多中文字體轉(zhuǎn) Unicode //www.css5.com.cn/jiqiao/325.shtml */ 

  5. ol, ul ,li{list-style:none} 

  6. img {border: 0; vertical-align:middle} 

  7. body{color:#FFF;bac公斤round:#FFF; text-align:center} 

  8. a{color:#FFF;text-decoration:none}  

  9. a:hover{color:#BA2636;text-decoration:underline} 

  10. /* 遵循本實例 設(shè)置裝備擺設(shè)超鏈接字體與不有超鏈接字體演示為白色 */ 

  11.  

  12. #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;bac千克round:url(bg.jpg) no-repeat} 

  13. /* position:relative是相對定位關(guān)頭，父級設(shè)置裝備擺設(shè) */ 

  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是相對定位癥結(jié)，子級設(shè)置裝備擺設(shè)同時lef right top bottom配合使用 */ 

  19.  

  20. h4.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預(yù)防內(nèi)容過多后主動換行 竄伏凌駕模式 */ 

2、殘缺HTML代碼：


  1. <!DOCTYPE html> 

  2. <html> 

  3. <head> 

  4. <meta charset="utf-8" /> 

  5. <title>相對定位 實例在線演示 CSS5</title> 

  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 

  7. <!-- css5.com.cn --> 

  8. </head> 

  9. <body> 

  10. <div id="wrapper"> 

  11. <div class="box1"> 

  12. <h4 class="title">新聞動態(tài)</h4> 

  13. <ul class="list"> 

  14. <li><a href="//www.css5.com.cn/wenti/558.shtml">不會按次能學會CSS嗎？</a></li> 

  15. <li><a href="//www.css5.com.cn/wenti/556.shtml">DIVCSS學習難嗎？</a></li> 

  16. <li><a href="//www.css5.com.cn/peixun/">我要列入CSS5的培訓</a></li> 

  17. <li><a href="//www.css5.com.cn/tools/720.shtml">jQuery所以版本鳩合整理</a></li> 

  18. </ul> 

  19. </div> 

  20. <div class="box2"> 

  21. <h4 class="title">CSS5欄目</h4> 

  22. <ul class="list"> 

  23. <li><a href="//www.css5.com.cn/html/">CSS根基教程</a></li> 

  24. <li><a href="//www.css5.com.cn/htmlrumen/">HTML底子教程</a></li> 

  25. <li><a href="//www.css5.com.cn/wenti/">CSS問題</a></li> 

  26. <li><a href="//www.css5.com.cn/tools/">CSS制作器材</a></li> 

  27. <li><a href="//www.css5.com.cn/jiqiao/">DIV CSS才智</a></li> 

  28. <li><a href="//www.css5.com.cn/texiao/">DIV+CSS+JS特效</a></li> 

  29. </ul> 

  30. </div> 

  31. <div class="box3"> 

  32. <h4 class="title">網(wǎng)站欄目</h4> 

  33. <ul class="list"> 

  34. <li><a href="//www.css5.com.cn/css/">DIV CSS入門</a></li> 

  35. <li><a href="//www.css5.com.cn/htmlrumen/">HTML入門教程</a></li> 

  36. <li><a href="//www.css5.com.cn/shili/">CSS實例</a></li> 

  37. <li><a href="//www.css5.com.cn/">CSS5首頁</a></li> 

  38. <li><a href="//www.css5.com.cn/mokuai/">DIV CSS模塊模板</a></li> 

  39. <li><a href="//www.css5.com.cn/w3c/">DIV CSS WEB標準</a></li> 

  40. </ul> 

  41. </div> 

  42. </div> 

  43. </body> 

  44. </html> 

關(guān)于“DIV CSS絕對定位布局的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手