第 2 章 網(wǎng)頁背景

1、第 2 章 網(wǎng)頁背景網(wǎng)站綜合開發(fā)解析“盒子模型”被看做是一個矩形，由內(nèi)容、填充、邊框 和邊距構(gòu)成。將div元素設(shè)置為margin:0 auto,可以實現(xiàn)居中對齊。為了使IE8.0兼容IE7.0,在頁面的head的標(biāo)簽中加入一段代碼：。上章回顧本章進(jìn)階掌握CSS設(shè)置顏色作為背景的方法 掌握CSS設(shè)置圖片作為背景的方法 熟悉漸變背景圖片的制作 網(wǎng)頁背景的介紹背景的類型1、顏色背景2、圖片背景網(wǎng)頁背景的介紹背景顏色背景顏色屬性 background-color 相關(guān)屬性值 RGB顏色分量、十六進(jìn)制顏色值、顏色英文關(guān)鍵詞 背景顏色屬性 背景圖片背景圖片屬性 background-image 相關(guān)屬性值

2、 url（） 背景圖片設(shè)置網(wǎng)頁背景圖片背景圖片重復(fù)屬性 background-repeat 相關(guān)屬性值 repeat:在水平方向和垂直方向均重復(fù)平鋪顯示（默認(rèn)值） repeat-x：只在水平方向上重復(fù)顯示 repeat-y：只在垂直方向上重復(fù)顯示no-repeat：不重復(fù)顯示圖片 背景圖片重復(fù)屬性 背景圖片的重復(fù) 網(wǎng)頁背景圖片背景固定屬性 background-attachment 相關(guān)屬性值 scroll:背景圖片和內(nèi)容一塊滾動顯示（默認(rèn)值） fixed:背景圖片不和內(nèi)容一塊滾動顯示 背景圖片滾動屬性 固定背景圖片網(wǎng)頁背景的介紹 定位背景圖片背景圖片屬性 background-positio

3、n 相關(guān)屬性值 水平位置（關(guān)鍵詞）、垂直位置（關(guān)鍵詞）：應(yīng)用關(guān)鍵詞來指定背景圖片的具體位置，一共有5個關(guān)鍵詞可以使用，分別是top、bottom、left、right、center水平位置（單位數(shù)值）、垂直位置（單位數(shù)值）：以左上角為起點，使用添加單位的數(shù)字或使用百分比來定義背景圖片的位置 背景圖片位置屬性 關(guān)鍵詞定位效果圖數(shù)值定位效果圖設(shè)置多個背景多個背景網(wǎng)頁實例效果圖設(shè)置多個背景 創(chuàng)建新的網(wǎng)頁文件 運用Dreamweaver軟件，進(jìn)入歡迎界面。選擇“文件”“新建”命令，選擇XHTML1.0 Transitonal格式，然后單擊“創(chuàng)建”按鈕，創(chuàng)建文檔。設(shè)置多個背景 修改網(wǎng)頁標(biāo)題 將之間默認(rèn)的

4、“無標(biāo)題文檔”改為“多個背景的實例”。將文 件保存在相應(yīng)的位置。多個背景的實例 頁面編碼 對應(yīng)的元素為，在Dreamweaver中有的編碼是utf-8，在中文網(wǎng)頁中，一般會使用gb2312編碼，請確保編碼是gb2312。設(shè)置多個背景 在之間嵌入CSS樣式聲明多個背景的實例 網(wǎng)頁背景的圖片設(shè)置多個背景設(shè)置多個背景 背景圖片設(shè)置為不重復(fù)顯示，背景色要與背景圖片顏色相符合。body background-image: url(2-10-bg.jpg); background-color:#f3f8fc; background-repeat:no-repeat; background-position

5、:left top; background-attachment:fixed; 在頁面添加文字內(nèi)容結(jié)構(gòu)代碼 設(shè)置多個背景因為她開在冰雪之上，與寒冷相伴，就叫她冰凌花如果你沒有親眼看到她，決不會相信這么柔弱的生命會開在冰雪之中。 當(dāng)春天的新綠還遲遲不肯露出嬌容的時候 定義、和的樣式設(shè)置多個背景.content width:400px; font-size:14px; color:#333; line-height:20px; padding:10px; border:3px solid #F6F; margin-top:100px; margin-left:150px; background-c

6、olor: #FDE8F7;h1 font-size:16px; color:#F6F; font-weight:bold; text-align:center;p text-indent:24px; 引用content的樣式設(shè)置多個背景 在中加入class=“content”。最終效果圖漸變背景 效果圖分析漸變背景背景圖片的制作 運用Photoshop軟件創(chuàng)建一個圖片文件 。 使用“吸管”工具將前景色設(shè)置為5CACFE，背景色設(shè)置FFFFFF；使用“漸變工具”，自上而下拉伸，填充圖片文件 。漸變背景 使用“單列選擇”工具選擇1像素寬、700像素高的頁面，另存為.gif格式。 漸變背景頁面文件

7、的制作 創(chuàng)建一個網(wǎng)頁文件，設(shè)置其頁面內(nèi)嵌樣式表的聲明。 在CSS中添加body屬性，對圖片設(shè)定水平方向重復(fù)顯示。在屬性中添加與圖片底部顏色一致的頁面背景色。 body background-image: url(2-11-bg.jpg); background-repeat:repeat-x; background-color:#FFF; margin:0; padding:0; 漸變背景 在和之間加入結(jié)構(gòu)代碼超越時尚 超越生活 超越成功 漸變背景 在樣式式表中，根據(jù)設(shè)計圖添加樣式.content width: 760px; margin:50px auto 0; padding:10px;

8、background-color:#FFF; border:1px solid #CCC; text-align:center; font-size:24px; 漸變背景背景的簡寫 背景樣式的CSS屬性可以簡寫，例如下面這段樣式使用了3條CSS屬性。 body background-image: url(2-11-bg.jpg); background-repeat:repeat-x; background-color:#FFF; body background: #FFF url(2-11-bg.jpg) repeat-x; 使背景圖片在瀏覽器窗口的右下位置。body background:

9、 #FFF url(2-11-bg.jpg) repeat-x right bottom; 綜合實例按登錄界面對應(yīng)的環(huán)境不同，可有以下分類： 操作系統(tǒng)登錄界面 軟件登錄界面 網(wǎng)站系統(tǒng)登錄界面綜合實例效果圖的分析 綜合實例頁面結(jié)構(gòu)的制作 綜合實例頁面內(nèi)容及樣式制作 整體頁面背景的制作body background:#FFFFFF url(images/bg.gif) repeat-x; margin:0px; padding:0px; font-size:12px; font-family:Verdana, Geneva, sans-serif; 綜合實例 對content進(jìn)行樣式定義.cont

10、ent width:100%; height:560px; background:url(images/lbg.gif) repeat-x; margin-top:50px; 綜合實例 對login_wap進(jìn)行樣式定義 .login_wap width:940px; margin:0 auto; 對login1進(jìn)行樣式定義 .login1 width:100px; height:238px; background-image(images/login01.jpg) 綜合實例 依次對login2、login3、login4和login5進(jìn)行樣式定義 .login2 width:208px; he

11、ight:190px; float:left; background-image: url(images/login02.jpg); .login3 width:518px; height:190px; float:left; background-image:url(images/login03.jpg); .login4 width:214px; height:190px; float:left; background-image:url(images/login04.jpg); .login5 width:100%; height:133px; background-image:url(

12、images/login05.jpg); 綜合實例 制作登錄框內(nèi)容 用戶： 密碼： 綜合實例 對ul標(biāo)簽和li標(biāo)簽進(jìn)行樣式定義ul list-style:none; padding-left:80px;li height:50px; line-height:50px; 綜合實例對用戶登錄頁面進(jìn)行樣式定義.iocn_user background:url(images/user.gif) no-repeat; padding-left:35px;.input width:164px;height:32px; vertical-align:middle; line-height:34px; background:url(images/inputbg.gif) repeat-x; border:solid 1px #d1d1d1; 綜合實例 依據(jù)同樣方法定義iocn_password的樣式.iocn_password background:url(images/password.gif) no-repeat; padding-left:35px; 綜合實例定義登錄系統(tǒng)按鈕和登錄框?qū)R.button padding-left:75px; 背景的設(shè)置可以采用兩種方式：顏色設(shè)置背景、圖片設(shè)置背景。 用backg