DIV + CSS 隨心所欲搞定網路排版寫作

一定要搞定它！

DIV解析圖：盒子模式

了解、掌握和運用DIV，是網頁寫作的基礎！

Div + Css 基礎概念講解【課堂錄影】

【CSS參考網站】

1. 為寫作區域加上邊框

語法【㊉↓】：
<div style="width: 70%; height: 40px; border: 1px solid darkred;">有加框的 DIV <br></div>

範例呈現：

有加邊框的 DIV

說明：
1. width: 寬度、height: 高度。可以用 xx% 或 xxpx 來表示。
2. border: 1px solid darkred; 。1px：邊框的寬度，solid：框線的形式，darkred：框線顏色。框線形式常用：solid（實線）、dotted（點線）、dashed（虛線）。

2. 為寫作區域加入背景色

語法【㊉↓】：
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #FFFAF0;">有加框的 DIV <br>加入背景色<br></div>

範例呈現：

有加邊框的 DIV
加入背景色

說明：
1. background-color: 背景顏色。顏色可以用色碼：#F4A460，或是顏色名稱：sandybrown 。【色碼表↗】。

3. 調整邊框和內容之間的距離

語法【㊉↓】：
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #F4A460; padding: 1em;">有 加框的 DIV 。加入背景色。調整四個邊框與文字（內容）之間的距離，將距離加大。<br></div>

範例呈現：

有加邊框的 DIV。加入背景色。padding: 調整邊框與文字（內容）之間的距離，將距離加大。

說明：
1. padding: xxpx，是調整內容與四個邊框之間的距離。常用用 px  或 em，例如 3px 或 2em。
2. 可以單獨調整某一邊框，padding-top: xxpx、padding-right: xxpx、padding-bottom: xxpx、padding-left: xxpx，可分別單獨調整上、右、下、左邊框與內容間的距離。

4. 調整邊框與外部編輯區之間的距離

語法【㊉↓】：
<div style="width: 70%; height: 40px; border: 1px solid darkred; background-color: #F4A460; margin: 1em;">有 加框的 DIV 。加入背景色。調整四個邊框與外部編輯區之間的距離，將距離加大。<br></div>

範例呈現：
上方的編輯內容區域。上方的編輯內容區域。上方的編輯內容區 域。

有加邊框的 DIV。加入背景色。margin: 調整邊框與外部編輯區之間的距離，將距離加大。

下方的編輯內容區域。下方的編輯內容區域。下方的編輯內容區域。

說明：
1. margin: xxpx，是調整外部編輯區域與四個邊框之間的距離。常用用 px  或 em，例如 3px 或 2em。
2. 可以單獨調整某一邊框與外部編輯區的距離，margin-top: xxpx、margin-right: xxpx、margin-bottom: xxpx、margin-left: xxpx，可分別單獨調整上、右、下、左邊框與外部編輯區之間的距離。
3. margin: xxpx，xx可以是正數，也可以是負數，例如 margin-top: -1em;【click ↑】 。負數是縮短邊框與外部編輯區域之間的距離。

使喚div的三種方法：

一、直接使用 style="xx"

<div style="width: 70%; height: 40px; border: 1px solid darkred;">
內容
</div>

二、使用class （可重覆使用）或id （只能用一次）

<style>
.classname {
width: 70%;
height: 40px;
border: 1px solid darkred;
}

#idname {
width: 70%;
height: 40px;
border: 1px solid darkred;
}
</style>

<div class="classname" id="idname">
內容
</div>

三、使用編輯軟體功能

慢工出細活：搞定DIV的調校；使用kompozer

說明：
（一）一和二相同重覆，以一為凖。也就是 style 是大於 Class 。
（二）class和id相同重覆，以id為凖。

Advanced：圖像（文字）的位移有三種方法

圖像以及文字，如果想要移動其在版面上的位置，可以有三種方法來處理。


一、使用「空白鍵」來增加「空白字元」。

就是不斷的按「space」「 空白鍵」，用增加「空白字元」（&nbsp;）的 方法，來移動圖像或字元。

                               字元或

這裡是空白鍵↑


二、在上層加上<div>xxx< /div>，再使用居左、居中、居右語法

使用「內容位移」語法 style="text-align: left;" //left, center, right  //左、中、右，來位置圖像或文字。


語法：

<div style="text-align: center;">這是文字或<img src="xxx"></div>


呈現：

這是文字或

三、使用DIV「留白」的語法，從左邊增加留白，也可以移動位置

留白的語法，可在DIV使用，也可以在其他「塊狀/ block」媒材物件，如 td、p等，都可使用。 一般而言，使用左邊留白 style="padding-left: 10px;" ，來決定向右移動距離。


語法：

<div style="padding-left: 8em;">這是文字或<img src="xxx"></div>


呈現：

這是文字或

這是留白8em↑