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

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

關於表格與切圖

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

CSS 語法 div

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

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


Step 1

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


Step 2

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

文字文字文字文字文字文字文字文字文字文字.....


Step 3

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

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

Step 4

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


Step 5

將圖片套用在 div 上面, 使用 CSS 語法如下:

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

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


Step 6

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

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

結果如下圖:


Step 7

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

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

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


Step 8

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

.BOX p {
  	font-size:12px;
  	line-height:20px;
  	letter-spacing:1px;
  	padding-bottom:12px;
}

補充說明:

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

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , , .

回應已關閉。