CSS 語法最重要的功能就是 display:block; 框格模型(區塊模式),框格可以製定寬度高度,可以調整位置,可以置入圖片… 等。 所謂的 CSS 網頁排版技巧,有一大半就是利用 display:block; 這個方法來完成的。
這個範例很簡單,先在網頁中將文字設定為 <h3> 標題,然後利用 CSS 語法 display:block; ,再置入圖片,就可以為每個標題文字設定背景圖片,很實用的入門技巧。
範例預覽: http://www.flycan.com/flycancss/block_TITLE.html
首先,在 HTML 網頁中,將標題文字設定為 <h3> 如下圖 ↓
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; /*設定文字在區塊中的上方間距*/ } |
完成圖如下 ↓
範例預覽: http://www.flycan.com/flycancss/block_TITLE.html
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!