提供網(wǎng)站建設(shè)：商務(wù)網(wǎng)站設(shè)計與制作
CSS設(shè)置背景色的顯示效果
包子商務(wù)網(wǎng)站設(shè)計與制作
2．背景圖
在HTML語言中，<body>標(biāo)記的background屬性可以設(shè)置網(wǎng)頁的背景圖。在CSS
中，背景圖的設(shè)置更加靈活，除了可以為整個網(wǎng)頁設(shè)置背景外，還可以為段落、行內(nèi)元素等設(shè)
置背景圖像。而且，在設(shè)置的內(nèi)容是背景圖時，還可以設(shè)置背景的重復(fù)效果、背景圖出現(xiàn)的
位置，以及是否隨網(wǎng)頁滾動等多項(xiàng)內(nèi)容。
格式：
其中，“圖像文件”是指圖像的URL，即圖像所在的位置及文件名信息，形如URL( ima-
ges\bg.jpg)。“圖像重復(fù)效果”的取值為repeat -x（水平方向上重復(fù)）、repeat -y（垂直方向
上重復(fù)）和no - repeat（不重復(fù)），默認(rèn)情況下水平和垂直方向上均重復(fù)。“圖像位置”具有多
種表示方法，可以是關(guān)鍵字、百分比、長度值等，常見的關(guān)鍵字有center、top、bottom、right、
left。background - attachment屬性用來說明背景圖是否隨網(wǎng)頁的滾動而滾動，默認(rèn)值scroll
表示滾動，當(dāng)設(shè)置為fixed時會禁止?jié)L動。
用“記事本”編寫如下代碼并保存為3_3_15. htm文件。
通過瀏覽器查看，上面這段代碼在IE 9中的顯示結(jié)果如圖3-31所示。
圖3 -31 CSS設(shè)置背景圖的顯示效果
使用CSS實(shí)現(xiàn)網(wǎng)頁的頁面布局
早期的網(wǎng)頁制作通常使用表格（< table>標(biāo)記）來實(shí)現(xiàn)網(wǎng)頁的頁面布局，而當(dāng)前則提倡
使用層和樣式表實(shí)現(xiàn)網(wǎng)頁的頁面布局。
層是網(wǎng)頁內(nèi)容的一個容器，使用< div>標(biāo)記實(shí)現(xiàn)，只要是能放置在網(wǎng)頁中的內(nèi)容，都可
以放置在層當(dāng)中。層最主要的特性是它可以在網(wǎng)頁上自由浮動，從而實(shí)現(xiàn)對網(wǎng)頁元素的精
確定位。而且，層的位置可以重疊，可以任意地控制層的前后位置，顯示或隱藏，這大大增強(qiáng)
了網(wǎng)頁設(shè)計的靈活性。
格式：
<d土V>…<／div>
1．< table>布局頁面和<div>布局頁面對比
下面對比一下< table>布局頁面和CSS布局頁面的優(yōu)缺點(diǎn)。
(1)使用表格進(jìn)行頁面布局會帶來很多問題。比如，使用表格進(jìn)行頁面布局會把格式數(shù)
據(jù)混入網(wǎng)頁的內(nèi)容中，這會使得文件無謂地變大，而用戶訪問每個頁面時都必須下載一次這
樣的格式信息；也使得重新設(shè)計現(xiàn)有的站點(diǎn)和內(nèi)容時會消耗更多的勞動力（且昂貴）；還極難
使整個站點(diǎn)保持視覺的一致性，花費(fèi)也極高?；诒砀竦捻撁孢€大大降低了它對殘疾人士
和用手機(jī)或PDA瀏覽信息的人群的親和力。
(2)使用CSS進(jìn)行網(wǎng)頁布局有一些顯著的優(yōu)勢：
①內(nèi)容和顯示分離，網(wǎng)頁前臺只需要顯示內(nèi)容就可以了，顯示上的美術(shù)工作交給CSS
來處理。生成的HTML文件代碼精簡，打開更快。
②改版網(wǎng)站更簡單容易。不用重新設(shè)計排版網(wǎng)頁，甚至不用動原網(wǎng)站的任何HTML語
言和程序頁面，只需要改動CSS文件就可以完成所有改版。對于門戶網(wǎng)站來說，改版就像換
件衣服一樣簡單容易。
③搜索引擎更友好，排名更容易靠前。
盒模型是關(guān)系設(shè)計中排版定位的關(guān)鍵，網(wǎng)頁中的容器都需遵循盒模型規(guī)范，如< div>、
<p>、<a>等。盒模型包含margm（外邊距）、padding（內(nèi)邊距）、content（內(nèi)容）、border（邊
框）。盒模型的工作方式如圖3 -32所示。
一一一
為了方便理解，盒模型可以轉(zhuǎn)化為我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱﹣砝斫?。正是因?yàn)槿?/span>
常生活中所見的盒子所具有的一些屬性，盒模型也有，所以稱為盒模型。盒模型中的內(nèi)容是
盒子里裝的東西，而內(nèi)邊距是怕盒子里裝的東西損壞而添加的塑料泡沫或者其他抗震的輔
料，邊框就是盒子本身，邊界則是用來注釋盒子的。比如，擺放的時候不能全部堆在一起，要
留一定空隙保持通風(fēng)，同時也為了方便取出。
在網(wǎng)頁設(shè)計上，內(nèi)容常指文字、圖片等元素，但也有可能是小盒子（div嵌套）。與現(xiàn)實(shí)生
活中的盒子不同的是，現(xiàn)實(shí)生活中盒內(nèi)的東西一般不能大于盒子，否則盒子會被撐壞，而
CSS盒子具有彈性，里面的東西大過盒子本身時，盒子最多會被撐大，但是不會被損壞。
傳統(tǒng)的前臺網(wǎng)頁設(shè)計是這樣進(jìn)行的：根據(jù)要求，先考慮好主色調(diào)，要用什么類型的圖片，
用什么字體、顏色，等等，然后再用Photoshop這類軟件畫出來，之后切成小圖，最后通過設(shè)計
HTML語言生成頁面，并用CSS排版。排版后主要考慮的是頁面內(nèi)容的語義和結(jié)構(gòu)，因?yàn)?/span>
一個強(qiáng)CSS控制的網(wǎng)頁做好后，可以輕松地調(diào)整想要的網(wǎng)頁風(fēng)格，況且CSS排版的另外一
個目的是讓代碼易讀，區(qū)塊分明，強(qiáng)化代碼重用，所以結(jié)構(gòu)很重要。
2．塊元素和內(nèi)聯(lián)元素
(1)塊元素(block element)。塊元素一般是其他元素的容器元素，通常從新的一行開
始，可以容納內(nèi)聯(lián)元素和其他塊元素。常見的塊元素是段落標(biāo)簽<p>。<form>這個塊元
素比較特殊，它只能用來容納其他塊元素。如果沒有CSS的作用，塊元素會順序以每次另起
一行的方式一直往下排。而有了CSS就可以改變這種HTML語言的默認(rèn)布局模式，把塊元
素擺放到想要放置的位置上去，而不是每次都另起一行。需要指出的是，< table>標(biāo)記也是
塊元素的一種。若是基于良好的重構(gòu)理念設(shè)計出的CSS布局頁面源碼，即使沒有Web開發(fā)
