CSS 教學 – 為標題文字設定背景圖片

CSS 語法最重要的功能就是 display:block;  框格模型(區塊模式),框格可以製定寬度高度,可以調整位置,可以置入圖片… 等。 所謂的 CSS 網頁排版技巧,有一大半就是利用 display:block; 這個方法來完成的。

這個範例很簡單,先在網頁中將文字設定為 <h3> 標題,然後利用 CSS 語法 display:block;  ,再置入圖片,就可以為每個標題文字設定背景圖片,很實用的入門技巧。

CSS 教學 - 網頁排版  - CSS 教學 - 為標題文字設定背景圖片 - 002_206

範例預覽: http://www.flycan.com/flycancss/block_TITLE.html


首先,在 HTML 網頁中,將標題文字設定為 <h3> 如下圖 ↓

CSS 教學 - 網頁排版  - CSS 教學 - 為標題文字設定背景圖片 - 001_278

 


CSS 語法 – 設定如下 ↓

 
h3{           
 
    display: block;                /*將 <h3>文字 設定為區塊模式*/
 
    height: 25px;           /*設定區塊的高度*/
 
    width: 513px;           /*設定區塊的寬度*/
 
    background-image: url(bar.gif);  /*設定區塊的背景圖*/
 
    font-size: 12px;         /*設定文字大小*/
 
    color: #000000;          /*設定文字顏色*/
 
    text-indent: 40px;        /*文字內縮排40像素*/
 
    font-weight: bold;        /*設定文字為粗體*/
 
    padding-top: 12px;        /*設定文字在區塊中的上方間距*/
 
}

 

完成圖如下 ↓

CSS 教學 - 網頁排版  - CSS 教學 - 為標題文字設定背景圖片 - 002_206

範例預覽: http://www.flycan.com/flycancss/block_TITLE.html

 

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

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in CSS 教學 - 網頁排版 and tagged , , , .

留言功能已關閉。