對(duì)于剛剛接觸網(wǎng)站的新手來(lái)說(shuō)，對(duì)網(wǎng)站上的網(wǎng)頁(yè)的背景如何制作可能不是很清楚。今天，小編將教前端新手如何設(shè)置修改網(wǎng)頁(yè)的背景顏色。 步驟一：打開(kāi)Adobe Dreamweaver，新建一個(gè)HTML網(wǎng)頁(yè)文件

對(duì)于剛剛接觸網(wǎng)站的新手來(lái)說(shuō)，對(duì)網(wǎng)站上的網(wǎng)頁(yè)的背景如何制作可能不是很清楚。今天，小編將教前端新手如何設(shè)置修改網(wǎng)頁(yè)的背景顏色。

步驟一：打開(kāi)Adobe Dreamweaver，新建一個(gè)HTML網(wǎng)頁(yè)文件

首先，我們需要打開(kāi)Adobe Dreamweaver軟件，并創(chuàng)建一個(gè)新的HTML網(wǎng)頁(yè)文件。

步驟二：設(shè)置網(wǎng)頁(yè)結(jié)構(gòu)

網(wǎng)頁(yè)的一般結(jié)構(gòu)包括DOCTYPE聲明、頭部標(biāo)簽lt;headgt;和文檔的主體lt;bodygt;標(biāo)簽。我們需要設(shè)置網(wǎng)頁(yè)背景，直接修改lt;bodygt;標(biāo)簽的背景屬性即可。

步驟三：添加CSS規(guī)則

點(diǎn)擊右邊的“所有規(guī)則”，新建一條規(guī)則。在彈出的界面中，選擇器類型為“標(biāo)簽選擇器”，選擇器名稱為“body”，然后點(diǎn)擊確認(rèn)。

步驟四：設(shè)置背景顏色

在CSS規(guī)則中選擇“背景”選項(xiàng)，在“background-color”中選擇一種顏色作為網(wǎng)頁(yè)背景色，然后點(diǎn)擊確認(rèn)。

步驟五：查看網(wǎng)頁(yè)背景

點(diǎn)擊瀏覽器調(diào)試按鈕，查看網(wǎng)頁(yè)背景效果。以下是詳細(xì)的代碼：

lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""gt;
lt;html xmlns""gt;
lt;headgt;
lt;meta http-equiv"Content-Type" content"text/html; charsetutf-8" /gt;
lt;titlegt;無(wú)標(biāo)題文檔lt;/titlegt;
lt;style type"text/css"gt;
body {
    background-color: FC6;
}
lt;/stylegt;
lt;/headgt;
lt;bodygt;
lt;/bodygt;
lt;/htmlgt;

擴(kuò)展：使用圖片作為網(wǎng)頁(yè)背景

除了顏色，網(wǎng)頁(yè)背景還可以使用圖片來(lái)設(shè)計(jì)。在剛剛新建的規(guī)則中，選擇“背景”并點(diǎn)擊“background-image”選項(xiàng)后的瀏覽按鈕，選擇作為背景的圖片，然后點(diǎn)擊確認(rèn)。

查看網(wǎng)頁(yè)背景

再次調(diào)試網(wǎng)頁(yè)，查看網(wǎng)頁(yè)的背景。以下是使用圖片作為網(wǎng)頁(yè)背景的代碼：

lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""gt;
lt;html xmlns""gt;
lt;headgt;
lt;meta http-equiv"Content-Type" content"text/html; charsetutf-8" /gt;
lt;titlegt;無(wú)標(biāo)題文檔lt;/titlegt;
lt;style type"text/css"gt;
body {
    background-image: url();
}
lt;/stylegt;
lt;/headgt;
lt;bodygt;
lt;/bodygt;
lt;/htmlgt;