通過實現設計模型中的頁面，來深入學習CSS的背景知識以及定位。
設計模型圖如下所示：
一、設計要求：
設計是流式的(fluid)或易於變化的，也就是說它的高度和寬度應該能夠子的哦哦那個適應使用者的瀏覽器，同時保持所需的比例。具體要求如下：
1）位於左側的每個圖片必須固定在原有的位置；
2）樹和LOGO必須能夠向右側移動，即樹必須一直與布局的底部相關聯；
3）層次上，樹不能遮擋logo以及其他板塊，必須處於最下層；左側的圖片模組在最頂層。
二、CSS背景的基本概念：
先看一段背景屬性的CSS代碼：
body{ background: #1299AB url(images/myBackground.gif) no-repeat fixed 10% 50px;}
CSS的背景可以分解成5個獨立的屬性：顏色、圖片、重複、附加和位置。下面著重介紹重複、附加和位置這三個屬性。
1、重複：重複屬性規定的是圖片的重複情況，它有幾個有效取值：n0-repeat（不重複，圖片只產生一次），repeat-x（水平方向上從左至右重複），repeat-y（使圖片從元素頂端開始沿著Y軸重複），repeat（屬性的預設值，從元素左上方開始平鋪整個元素）。
2、附加：附加屬性定義“位置”屬性的計算是與頁面內容相關，還是與瀏覽器視口相關。所以它有兩個有效值，fixed和scroll(預設值)。fixed可以約定背景圖片將固定不動，而scroll則約定背景圖片會隨著頁面其餘部分滾動而移動。
3、位置：這個屬性定義了背景圖片起始的X和Y座標。確定背景圖片X座標的水平方向的關鍵字有：left（預設值）、center、right；確定背景圖片Y座標的垂直方向的關鍵字有：top（預設值）、center、bottom；其他的有效選擇還有：相對值（百分比）或絕對值（px/em/mm/pt）.
三、HTML頁面
回到執行個體中，根據設計模型，編寫實現的HTML代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><!--meta標記定義的字元集是支援中文的gb2312--><meta http-equiv=content-type content="text/html; charset=gb2312"><!--連結外部CSS樣式 --><link rel="stylesheet" href="deadwood.css" type="text/css" media="screen" /><title>Deadwood Design</title></head><body><!--頁面的logo --><h1 id="logo">Deadwood Design</h1><!--頁面上的介紹資訊 --><div id="intro"><p><span>D</span>eadwood design is Australia's 47th best web design and development agency.</p><p>We specialise in awesomeness.</p></div><!--為排序列表顯示圖片，理論上是要放入頁面作品區portfolio的DIV塊中，並將淺色格子作為背景，但是IE對z-index支援不好，所以把這個列表置於div外 --> <ul> <li><a href="1.html"><img src="images/portfolio1.jpg" alt="Mountains and Sky"/></a></li> <li><a href="2.html"><img src="images/portfolio2.jpg" alt="Lampshade"/></a></li> <li><a href="3.html"><img src="images/portfolio3.jpg" alt="Cat"/></a></li> <li><a href="4.html"><img src="images/portfolio4.jpg" alt="Bark"/></a></li> <li><a href="5.html"><img src="images/portfolio5.jpg" alt="Thumbs Up"/></a></li> <li><a href="6.html"><img src="images/portfolio6.jpg" alt="Flowers"/></a></li> </ul><!--設計一個格子模型延伸橫跨整個頁面，並位於樹的映像之下 ，所以HTML中，portfolio div塊先與tree div--> <div id="portfolio"></div><!--在DIV元素中放置頁面右下角的枯樹圖片 --><div id="tree"></div></body></html>
對HTML代碼解讀的如下所示：
四、CSS代碼
為上述頁面編寫的CSS代碼如下：
/*CSS STYLE SHEET FOR [基於CSS進行設定實現的一個首頁] Created by [Serein_Chan]Email: [Serein_Chan@foxmail.com]Author Blog:[http://blog.csdn.net/cxwen78]*//*注釋 *//*body的樣式 *//*背景圖片水平方向重複，映像的最底端的顏色與背景顏色灰色 #A4A4A4接近，實現效果，適應性高，效率高 */body { background: #A4A4A4 url(images/bg_gradient.gif) repeat-x;}/*樹DIV塊的樣式 */#tree { position: absolute; /*要將DIV固定在右下角，所以採取絕對位置*/ bottom: 0; /*緊貼頁面底部 */ right: 40px; /*和頁面右側距離40px */ background: url(images/tree.gif) no-repeat; /*背景圖片，不重複 */ /*根據圖片大小設定DIV的寬度和高度 */ width: 331px; height: 400px;}/*logo DIV塊的樣式 */#logo { position: absolute; /*要使DIV塊與頁面頂部和右側距離固定，採取絕對位置*/ top: 15%;/*採用百分比值使得logo更好的適應顯示器*/ right: 40px; /*和頁面右側距離40px */ width: 334px; height: 36px; background: url(images/logo.gif) no-repeat; /*背景LOGO圖片，不重複 */ text-indent: -9999em; /*HTML中添加h1描述使頁面具有意義，這裡設定負的text-indent把文本反向轉移到頁面之外*/ margin: 0; z-index: 3; /*具有較高z-index值的元素會覆蓋值低的元素，即將logo置於tree的上層 */}/*介紹性段落的DIV塊的樣式 */#intro { position: absolute; top: 15%;/*與logoDIV塊呼應，將div置於距頂部15%*/ left: 40px; /*距body元素的左邊界40px的位置 */ background: url(images/d.gif) no-repeat;/*段落的第一個字母D是圖片 */ padding: 5px 0 0 61px;/*為了確保文本不會覆蓋這個div的背景圖片，分別在圖片左側和頂部添加61px和5px的內邊距補白 */ width: 250px; color: #fff; font-family: Georgia, serif; font-size: 0.8em;}/*為確保文本Deadwood的完整性，將文本字母D插到span元素中，並將其置於頁面之外 */#intro span { position: absolute; top: -1000px; /*將span元素置於頁面之外 */}#intro p { margin: 0 0 12px 0;} /*頁面的作品區，包括6個連結，分別連結到不同頁面來展示作品集 */ /*樣式要求，設計一個格子模型延伸橫跨整個頁面，並位於樹的映像之下 ，所以HTML中，portfolio div塊先與tree div*/#portfolio { position: absolute; top: 35%; left: 0; width: 100%; height: 294px; background: url(images/bg_checkered.gif); /*用一張40*40的方塊映像作為格子背景 */}/*未排序列表顯示作品集 */ul { position: absolute; top: 35%; left: 40px; padding:0; z-index: 4;/*具有較高z-index值的元素會覆蓋值低的元素，即將置於portfolio和tree的上層 */ list-style: none inside; /*列表樣式：無標記；清單項目標記放置在文本以內，且環繞文本根據標記對齊。*/ width: 482px; height: 294px; margin: 0;}ul li { width: 138px; height: 138px; float: left; margin: 0 18px 18px 0; background: url(images/bg_checkered_dark.gif); /*設定8*8像素的格子圖片做背景，顯得顏色更深一點 */}/*連結映像地區的設定 */ul li a { float: left; width: 102px; height: 102px; margin: 18px 0 0 18px;}ul li a img { border: 0;}
大功告成，最終的如下：
五、素材圖片
參考：《The Art & Science of CSS》
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
