接下來要如何去佈局您的畫面
通常我們比較常拿 Div ( 塊狀模型 ) 來做區塊
然後再去排 Div 的位置與大小
如下圖 :
什麼是 Div ( 塊狀模型 ) ?
通常我們用來做不同的區塊特性
通常 Div 預設是直接佔用一整行
在網頁中，我們有幾種佈局的方法 ;
- 流動模型 ( Flow )
- 浮動模型 ( Float )
- 層次模型 ( Layout )
浮動模型
剛剛有提到 Div 是直接佔用一整行
那如果我們要呈現像上方的圖( 樣式 )就可以用浮動模型 ( Float )
例如上圖 : Div_2 要靠 Div_1 右邊，所以要對 Div_1 設置
| 用法 | 說明 | 備註 |
| float:left; | 調整 Div 區塊對應位置 | left ( 靠左 )、right ( 靠右 ) |
層次模型
| 模型層 | 用法 | 說明 |
| 絕對位置 | position:absolute; | 模塊移動到對應的座標位置 |
| 相對位置 | position:relative; | 模塊移動到對應的座標位置 但實際是占用到原本的空間 |
| 固定位置 | position:fixed; | 模塊移動到對應的座標位置 但不隨網頁的滾動產生移動 |
<!DOCTYPE html>
<html>
<style>
#box1{
width:150px;
height:150px;
border:2px red solid;
position:absolute; // 可更改參數看這三種的差異
left:50px;
top:50px;
}
</style>
<body>
<div id="box1"></div>
<div>Hello world !!!</div>
</body>
</html>
歡迎轉載，請註明出處。
沒有留言:
張貼留言