CSS 排版教學 – div 圖文框排版入門

這個範例是入門的練習，一步一步帶同學練習，教同學使用 CSS 語法 寫出圖文框的排版技巧。

關於表格與切圖

以前使用表格排版的時候，要製作圓角圖框的排版就必須把先把圖片切割大卸九塊，然後再用表格把切割過後的圖片拚在一起還原之後，才能把網頁需要的文字貼在表格之內….光想起來就是大工程一件啊！

CSS 語法 div

現在使用 div 搭配 CSS 語法製作圖角圖框就輕鬆多了，圖片免切割，可以自由調整文字與圖片的間距，網頁的 HTML 語法更是精簡了許多，不但提高了網頁設計的工作效率，更可以精確的調整出我們需要的排版效果呢。

Step 1

首先，在網頁 HTML 原始碼內寫上一個 div 並用 class 為 div 命名為 BOX 如下：

Step 2

然後在 div 內貼上一些文字內容，網頁的文字內容格式要設定為 <p> 標籤，才是正確的文字段落結構，如下：

Step 3

開啟 CSS 檔，針對 div 和 文字部份，分別設定 CSS 語法如下：

<div class="BOX">
 
</div>

Step 4

我們準備了一張圓角圖框的圖片，寬度 800 像素、高度 200 像素，如下圖：

Step 5

將圖片套用在 div 上面， 使用 CSS 語法如下：

<div class="BOX">
<p>文字文字文字文字文字文字文字文字文字文字.....</p>
</div>

目前，用瀏覽器把網頁打開來預覽一下，如下圖所示：

Step 6

然後，我們繼續在 div 上使用 padding 語法，設定內間距，把文字往中間推，由於 padding 會和 div 原本的 width height 相加在一起，因此當我們使用 padding 之後，整體 div 的寬度和高度就會擴大，如下 ：

.BOX{} /* 針對 div 的部份 */
.BOX p{} /* 針對 文字內容 的部份 */

結果如下圖：

Step 7

因此當我們使用 padding 之後，要再修改一下 width 寬度， height 高度 這兩個部份，讓 padding 和 width height 全部加在一起剛好等於圖片的大小寬度 800 像素、高度 200 像素才行，如下 ：

.BOX {
  	width:800px;
  	height:600px;
  	background-image:url(box.jpg);
}

此時就可以得到我們需要的效果了，如下圖：

Step 8

最後，再把文字內容部份設定 <p> 段落文字的大小、間距、行距….本範例就告一段落完成啦~

.BOX {
  	width:800px;
  	height:200px;
  	background-image:url(box.jpg);
  	padding:40px 20px 0 20px;
}

補充說明：

padding 內間距的寫法

padding: 「上間距」「右間距」「下間距」「左間距」;

所以 padding:40px 20px 0 20px; 就是「上間距 40 像素」「右間距 20 像素」「下間距 0 像素」「左間距 20 像素」

完成範例預覽： http://www.flycan.com/sample/20091015_div_box/div_box/index.html

完成範例下載： http://www.flycan.com/sample/20091015_div_box/div_box.zip

當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！