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