溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“DIV CSS絕對定位布局的方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“DIV CSS絕對定位布局的方法”文章能幫助大家解決問題。
1、要用到CSS花式單詞及講明
position：絕對定位花式完成DIV定位結構其設置值absolute與relative運用
width：寬度，配置對象寬度
height：高度，設置對象高度
line-height：行高，配置文本行高
left：配置div對象靠左距離
right：配置div對象靠左間隔
top：配置div對象靠左隔絕距離
bottom：配置div對象靠左隔斷
bac公斤round：靠山，設置裝備擺設后援圖片與色調
color：配置字體色彩
font-size：配置字體大小
font-weight：設置字體加粗
2、用到HTML標簽及詮釋
div標簽：用于構造結構框架
ul li標簽：用于布局列表型數據列表
h4標簽：用于布局欄指標題
CSS5將潛伏翰墨后整圖作為最外層大盒子DIV的后盾圖片，命名為bg.jpg。
潛伏筆墨后的圖片素材，可直接糊口生涯使用
這一個最外層DIV，設置好寬度高度、靠山圖片，同時設置裝備擺設position:relative。此盒子里分袂布局3個小DIV盒子，分袂設置裝備擺設好寬度高度，同時設置position:absolute相對定位再使用left、right、top、bottom這幾個花色定位好這3個盒子地位。
顛末以上組織便可結構好三個DIV盒子，再分袂構造欄指標題與內容便可實現。
同時此案例咱們可在CSS5提供的收費初始化模板根蒂前程行機關，以便兼容各大涉獵器。
下列是最外層DIV盒子及CSS代碼與內容3個小盒子機關代碼。
1、HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對定位 實例在線演示 CSS5</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!-- css5.com.cn -->
</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}
/* 三個小盒子使用position:relative同時配置寬度 高度 left right top bottom實現構造與準肯定位 */
額定闡明：以上三個小盒子相對定位寬度、高度、top、left、right、bottom的準確值必需顛末PS軟件失去，置信退出CSS5培訓同硯通過上課曾經學會獲取各屬性和值的門徑。（CSS5課堂中引見和視頻哄騙演示過各值PS若何獲取的技能手法）這里就不再具體先容與教學。
3、大要造詣截圖
在DW軟件中成績截圖
從以上圖看出布局結構初現。再以上根抵上分袂機關欄目題目與對應模式便可完成此機關。
1、完整CSS代碼
@charset "utf-8";
/* CSS5-CSS初始化模板-css5.com.cn */
body, div, ul, li,h4{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
/* \5B8B\4F53 代表 宋體，更多中文字體轉 Unicode //www.css5.com.cn/jiqiao/325.shtml */
ol, ul ,li{list-style:none}
img {border: 0; vertical-align:middle}
body{color:#FFF;bac公斤round:#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;bac千克round: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配合使用 */
h4.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>相對定位 實例在線演示 CSS5</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!-- css5.com.cn -->
</head>
<body>
<div id="wrapper">
<div class="box1">
<h4 class="title">新聞動態</h4>
<ul class="list">
<li><a href="//www.css5.com.cn/wenti/558.shtml">不會按次能學會CSS嗎？</a></li>
<li><a href="//www.css5.com.cn/wenti/556.shtml">DIVCSS學習難嗎？</a></li>
<li><a href="//www.css5.com.cn/peixun/">我要列入CSS5的培訓</a></li>
<li><a href="//www.css5.com.cn/tools/720.shtml">jQuery所以版本鳩合整理</a></li>
</ul>
</div>
<div class="box2">
<h4 class="title">CSS5欄目</h4>
<ul class="list">
<li><a href="//www.css5.com.cn/html/">CSS根基教程</a></li>
<li><a href="//www.css5.com.cn/htmlrumen/">HTML底子教程</a></li>
<li><a href="//www.css5.com.cn/wenti/">CSS問題</a></li>
<li><a href="//www.css5.com.cn/tools/">CSS制作器材</a></li>
<li><a href="//www.css5.com.cn/jiqiao/">DIV CSS才智</a></li>
<li><a href="//www.css5.com.cn/texiao/">DIV+CSS+JS特效</a></li>
</ul>
</div>
<div class="box3">
<h4 class="title">網站欄目</h4>
<ul class="list">
<li><a href="//www.css5.com.cn/css/">DIV CSS入門</a></li>
<li><a href="//www.css5.com.cn/htmlrumen/">HTML入門教程</a></li>
<li><a href="//www.css5.com.cn/shili/">CSS實例</a></li>
<li><a href="//www.css5.com.cn/">CSS5首頁</a></li>
<li><a href="//www.css5.com.cn/mokuai/">DIV CSS模塊模板</a></li>
<li><a href="//www.css5.com.cn/w3c/">DIV CSS WEB標準</a></li>
</ul>
</div>
</div>
</body>
</html>
關于“DIV CSS絕對定位布局的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
