html中如何写div中div的位置,DIV CSS绝对定位布局案例 position布局实例
DIVCSS5為大家實例講解絕對定位布局。絕對定位我們要用到樣式position:absolute和position:relative,同時需要top、bottom、left、right配合布局實現(xiàn)DIV絕對定位。通過真實案例演示與介紹絕對定位布局方法技術(shù)。
Css div絕對定位案例截圖
遇到以上的不規(guī)則案例布局,如果使用float、padding等浮動實現(xiàn)比較麻煩,但使用position絕對定位即可很好簡單地實現(xiàn)。接下來DIVCSS5為大家介紹position絕對定位方法布局以上小的案例。
一、用到CSS樣式和HTML標簽及相應(yīng)解釋 ? - ? TOP
1、要用到CSS樣式單詞及解釋
position:絕對定位樣式實現(xiàn)DIV定位布局其設(shè)置值absolute和relative應(yīng)用
width:寬度,設(shè)置對象寬度
height:高度,設(shè)置對象高度
line-height:行高,設(shè)置文本行高
left:設(shè)置div對象靠左距離
right:設(shè)置div對象靠左距離
top:設(shè)置div對象靠左距離
bottom:設(shè)置div對象靠左距離
background:背景,設(shè)置背景圖片和顏色
color:設(shè)置字體顏色
font-size:設(shè)置字體大小
font-weight:設(shè)置字體加粗
2、用到HTML標簽及解釋
div標簽:用于布局結(jié)構(gòu)框架
ul li標簽:用于布局列表型數(shù)據(jù)列表
h3標簽:用于布局欄目標題
二、絕對定位實際案例布局思維解釋介紹 ? - ? TOP
DIVCSS5將隱藏文字后整圖作為最外層大盒子DIV的背景圖片,命名為bg.jpg。
隱藏文字后的圖片素材,可直接保存使用
這一個最外層DIV,設(shè)置好寬度高度、背景圖片,同時設(shè)置position:relative。此盒子里分別布局3個小DIV盒子,分別設(shè)置好寬度高度,同時設(shè)置position:absolute絕對定位再使用left、right、top、bottom這幾個樣式定位好這3個盒子位置。
通過以上布局即可布局好三個DIV盒子,再分別布局欄目標題和內(nèi)容即可實現(xiàn)。
同時此案例我們會在DIVCSS5提供的免費初始化模板基礎(chǔ)上進行布局,以便兼容各大瀏覽器。
三、絕對定位案例重要代碼 ? - ? TOP
以下是最外層DIV盒子及CSS代碼和內(nèi)容3個小盒子布局代碼。
1、HTML代碼
html>
絕對定位?實例在線演示?DIVCSS5總結(jié)
以上是生活随笔為你收集整理的html中如何写div中div的位置,DIV CSS绝对定位布局案例 position布局实例的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: VideoJS 与 Framework7
- 下一篇: html鼠标悬浮缩放,CSS3鼠标悬浮过