2012年2月8日 星期三

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

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

關於表格與切圖

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

CSS 語法 div

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

Step 1

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

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

Step 2

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

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

Step 3

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

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

Step 4

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

Step 5

將圖片套用在 div 上面， 使用 CSS 語法如下：
1
2
3
4
5

.BOX {
   width:800px;
   height:600px;
   background-image:url(box.jpg);
}
目前，用瀏覽器把網頁打開來預覽一下，如下圖所示：

Step 6

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

.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 像素才行，如下 ：
1
2
3
4
5
6

.BOX {
   width:760px;
   height:160px;
   background-image:url(box.jpg);
   padding:40px 20px 0 20px;
}
此時就可以得到我們需要的效果了，如下圖：

Step 8

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

.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 像素」
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)