CSS DIV 背景顏色

CSS DIV 背景顏色可以透過 CSS 本身的 background-color 屬性來設計,而且不只是 DIV 背景顏色能使用,網頁中的各種元素都可以使用,因為 background-colorCSS 的背景顏色設計標準語法,所以主流的瀏覽器都支援。通常使用 background-color 來設計 DIV 背景顏色時,會需要使用《色碼表》來挑選不同的顏色,直接套用進去 background-color 語法參數即可,以下是幾個 CSS DIV 背景顏色的設計範例。

CSS DIV 背景顏色設計範例
<div style="background-color:#FFD382;padding:10px;margin-bottom:5px;">將 DIV 背景顏色設計為 #FFD382</div>
<div style="background-color:#82FF82;padding:10px;margin-bottom:5px;">將 DIV 背景顏色設計為 #82FF82</div>
<div style="background-color:#30FFFF;padding:10px;5">將 DIV 背景顏色設計為 #30FFFF</div>
範例呈現的效果
將 DIV 背景顏色設計為 #FFD382
將 DIV 背景顏色設計為 #82FF82
將 DIV 背景顏色設計為 #30FFFF
範例共有三個 DIV 區塊,其中有三個 CSS 屬性,分別為 background-colorpadding、以及 margin-bottom,重點在於 background-color 這個用來控制 DIV 背景顏色的屬性,而 padding 僅用來控制內距,margin-bottom 是 DIV 彼此間的距離,也就是所謂的外距,對這幾個基本 CSS 屬性有興趣的朋友,可以閱讀以下幾篇語法解說。
我們回到 DIV 背景顏色的地方,各位可以注意到,每個 DIVbackground-color 所用的色碼都不一樣,例如 #FFD382、#82FF82... 這些都是十六進位的色碼,每一種色碼僅代表一種顏色,這些色碼就是控制 DIV 背景顏色的主要關鍵,可以從本站的《色碼表》挑選不同顏色。

如果想要進一步的了解 background-color 屬性,請詳閱《CSS background-color 背景顏色》篇幅的介紹。另外,單純的背景顏色不夠滿足網頁精緻風格,可以考慮使用背景圖片,請參閱:CSS DIV 背景圖片

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C