使用 xHTML(div系列標籤) 排版 絕非因 table 排版不佳而使用
, table 與 div系列 其實各自有其好處
這裡刻意強調 div系列標籤意指 ,
網站的構成並非單靠 div 建構
table 優點 :
1.排版快速
2.相容性高
3.容易理解
缺點 :
1.程式碼與排版美術樣式混雜
2.讀取速度較慢
3.影響搜尋引擎結果
div 優點 :
1.排版彈性高
2.結構較大之網頁,事後修改容易
3.讀取速度快
4.提高搜尋引擎結果
5.code簡潔
缺點 :
1.撰寫code較長,較花時間
2.初學不易理解
單靠div建構 缺點 :
1.一個全是div結構,無法透過code看出其網站結構
反倒是table,tr .td仍可看出來有行列之分
2.影響日後維護
1.馬上來排版
排版意味者我們希望一個空白的版面,可以切出我們想要的區塊
填放我們要放的內容
排版前注意
我們試著把div想像成一個很大的區塊
ul是其中部份區塊,而li又是其中更小的塊狀
1.1.假設我們今天要來排最典型 三個大並排區塊
我們對 d-table , d-row加上紅線與藍線
方便我們觀察區塊變化
另外對 d-table 加上 height: 200px;
方便我們對 d-table 區塊包覆情況觀察
<style type="text/css">
.d-table{
border:1px solid red;
height: 200px;
}
.d-row{
border:1px solid blue;
}</style><div class="d-table">
<div class="d-row">
<div class="d-col">第一個欄位</div>
<div class="d-col">第二個欄位</div>
</div>
<div class="d-row">
<div class="d-col">第三個欄位</div>
<div class="d-col">第四個欄位</div>
</div>
<div class="d-row">
<div class="d-col">第五個欄位</div>
<div class="d-col">第六個欄位</div>
</div>
</div>
仔細觀察,框架是由左側開始,但實際上並不是"真正的從左側開始"排列
因此我們在樣式裡加上以下 float:left;
.d-row{
float:left;
border:1px solid blue;
}
讓 d-row強制從左邊開始排列
(正確來說應該是從左上角開始排列)
可以看到下圖結果,三個區塊開始並排
如果無法理解,試著想像一下,原本三個大區塊硬是要由上而下擠滿整個空間
強制靠左後,由於內容寬度較短,由左擠至右,自然就變成三個並排區塊
以此類推這樣的結構便可架構出自己想要的排版
2.margin 和 padding 的使用
各位有發現框線與框線間粘的好緊,我們希望都有其間距
我們在 d-row 加上 margin : 5px;
意思是由該區塊往外推的距離
.d-row{
float:left;
border:1px solid blue;
margin : 5px;
}
如下圖:
在 d-table 加上 padding : 5px;
意思是該區塊邊線至內容的距離
.d-table{
border:1px solid red;
height: 200px;
padding : 5px;
}
如下圖:
內容又受到 table往內壓縮之結果
下圖中例子便可以看出
1.對A來說,padding表往內壓縮 B框架的間距
2.對B來說,padding表往內擠壓 B內容的間距
3.對B來說margin往外推出與外層間的距離
事實上不管是 margin 或是 padding 還有上下左右之區分
用來控制"微調"重要的框架中內容元素的間距
padding-top (上)
padding-right (右)
padding-bottom (下)
padding-left (左)
margin-top (上邊界)
margin-right (右邊界)
margin-bottom (下邊界)
margin-left (左邊界)
3.ul,li替代其中巢狀結構
上述代碼全部都是以div建構而成,我們試著以ul,li
替代後的結果變為
<div class="d-table">
<ul class="d-row1">
<li class="d-col">第一個欄位</li>
<li class="d-col">第二個欄位</li>
</ul>
<ul class="d-row2">
<li class="d-col">第三個欄位</li>
<li class="d-col">第四個欄位</li>
</ul>
<ul class="d-row3">
<li class="d-col">第五個欄位</li>
<li class="d-col">第六個欄位</li>
</ul>
</div>
3.內容元素間的微調距離
大架構抵定後就是對內容元素做些微調整
不外乎就是透過 margin 與 padding 去對內容間距做微調
達到我們想要的視覺效果
注:使用li標籤在未給予css樣式前左邊會有一個黑圓圈
賦予樣式後則消失
在d-table我們加入 height : 900px;
.d-table{
border : 1px solid red;
height : 900px;
}
對d-row1加入
padding-top : 40px;
padding-left : 50px;
表示對d-row1框架上距與左距微調50px
並增加
width : 300px;
height : 800px;
.d-row1{
float : left;
border : 1px solid blue;
padding-top : 50px;
padding-left : 50px;
width : 300px;
height : 800px;
};
新增以下兩個樣式
結構為 d-col1與2 ,為d-row1底下的兩個小區塊
故意設間距不一樣,為了讓它看出其差異性
可隨意控制不同兩個區塊特性
.d-row1 .d-col1{
padding-top : 10px;
padding-left : 20px;
}
.d-row1 .d-col2{
padding-top : 15px;
padding-left : 25px;
}
在框架結構裡也記得調整為底下
<div class="d-table">
<ul class="d-row1">
<li class="d-col1">第一個欄位</li>
<li class="d-col2">第二個欄位</li>
</ul>
代碼沒有問題的話,就會像下圖這樣
注:
(1)若css樣式未指定層級路徑
.d-col1{
padding-top : 10px;
padding-left : 20px;
}
css 樣式則會去尋找所有該標籤設定的組合設置
若想要設置到對的區塊,應避免標籤重覆
當然有時候,重覆標籤設計亦是為了後續維護便利性
才可以調整一個全部都一起調整
(2)若指定的css 為非人為賦予的,例如 li ,ul
則標籤層級可以寫為
(前面不加任何 . 與 # 囉)
.d-row1 li{
}
(3)若有使用外部樣式連結時,修改其中一區塊中外部樣式內容
其他內容若也有套用同樣樣式,則會一起被調整到
4.id與class區別
id為一頁面唯一的標示,用來定義特殊的元素內容
就好比人的名子,一個屋子下一個人只會有一個名子
用法與class一樣 只是由原本的 .css{ } , 改為 #css{ }
#css5 {height:25px; width: 200px;}
<div id="css5">我是ID例子</div>
而class是一種樣式,就好比衣服可以套用在不同人身上
概念上來說
id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，
再套給多個結構/內容。
歸納成一句話就是：class可以反複使用而id在一個頁面中僅能被使用一次
沒有留言:
張貼留言