前言
在用CSS控制排版過程中，定位一直被人認為是一個痛點，這主要是表現為很多網友在沒有深入理解清楚定位的原理時，排出來的雜亂網頁常讓他們不知所措，而另一邊一些高手則常常藉助定位的強大功能做出些很酷的效果來，比如CSS相簿等等，因此自己雜亂的網頁與高手完美的設計形成鮮明對比，這在一定程度上打擊了初學定位的網友，也在他們心目中形成這樣的一種思想：當我熟練地玩轉CSS定位時，我就已是高手了。不管你怎麼想，我只希望下面的教程能讓你更深入地瞭解CSS定位屬性。
閱讀建議
先說說我這篇教程的思路，這對於你在正真開始閱教程前是有很大協助的。我的思路是這樣的：先給出定位較專業化精鍊的解釋，接下來再用打比如的方法形象地介紹它們，此時大家要和前面講到的專業解釋對比閱讀。介紹完理論，將通過執行個體來介紹定位的各知識點，雖然執行個體不美，但每一則執行個體都是精心挑選的，如果要完整掌握CSS定位方法，請務必弄懂每一個執行個體的原理。最後將會帶大家做一個較為酷的綜合執行個體。如果你想提高你閱讀本文的興趣或者動力，你可以先跳到最後看綜合執行個體的運行效果。
1．定位的專業解釋
(1)文法
position : static | absolute | fixed | relative
(2) 說明
從上面文法可以看出，定位的方法有很多種，它們分別是靜態（static），絕對位置（absolute），固定(fixed)，相對定位（relative）。在這個教程裡，我不逐一講，只講最常用也是最實用的兩個定位方法：絕對位置（absolute）、相對定位（relative）。
絕對位置（absolute）：將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top， bottom等屬性相對於其最接近的一個最有定位設定的父級對象進行絕對位置，如果對象的父級沒有設定定位屬性，即還是遵循HTML定位規則的，則依據 body 對象左上方作為參考進行定位。絕對位置對象可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在最上面，可以有負值（目前負值FF不支援）。
相對定位（relative）：對象不可層疊，依據left，right，top，bottom等屬性在正常文檔流中位移自身位置。同樣可以用z-index分層設計。
2．定位的形象解釋
我先來架設一個虛擬情境：有一個矩形的房間，裡面還有一個水桶裝了些水，水裡還浸泡著一個西瓜，這個房間半空中還有不少的鉤子用於掛東西用。現在我把網頁元素與上面物件對應上，那麼房間就是一個網頁，水桶是網頁中的一個板塊，桶中的水就是文字資料流，西瓜就是將要被定位的對象。
（1）貢獻的絕對位置（absolute）
對照前面解釋，如果西瓜被賦予絕對位置，那麼就等於把西瓜從水中撈起來掛在半空中的鉤子上，水桶中西瓜原來佔用的空間水會自動填補它（絕對位置對象會讓出自己原先佔用位置，所以說它是貢獻的）。此時如果之前沒有對水桶進行定位設定，那麼被拿起的西瓜位置不會再受水桶位置影響，水桶怎麼移動，西瓜還是掛在原來位置，至於西瓜要怎放，則以房間左上方（body左上方）為準，用left，right，top，bottom值來定位。但是如果水桶也給出了定位設定（通常是相對定位，下面有講到這一實用技巧），此時西瓜的擺放就沒有那麼自由了，儘管此時西瓜被拿起來了不會影響水桶中的水（文字資料流），但它還是要聽桶的話，桶會告訴西瓜“你可以活動，但應該在我的範圍內走動，比方說我要你在我左上方1米處，你就要跟死這一點，我走你也要跟著走”，如果桶中有很多個西瓜，可以全部拿出來吊到半空中，它們將被安排在不同高度的空間（層），所以在房頂垂直往下看，有可能看到不同西瓜層疊在一起的情況（這個所謂的高度在網頁中是不存在的，就像FLASH動畫中的不同層上安排了元素，但它們在看時不會有深度感覺）。可見絕對位置的對象參考目標是它的父級，專業稱之為包含塊。
（2）自私的相對定位（relative）
相對定位一個最大特點是：自己通過定位跑開了還佔用著原來的位置，不會讓給他周圍的諸如文字資料流之類的對象。相對定位也比較獨立，做什麼事它自己說了算，要定位的時候，它是以自己本身所在位置位移的（相對對象本身位移）。再拿前邊作比如來解，那麼此時西瓜似乎是有魔法的，如果西瓜通過相對定位在水桶中位移了你會看到一個現實生活中不存在的現象：水中有一個地方水凹下去了，周圍的水不能填補它，西瓜看起來在旁邊，如果攪動一下桶中的水，那個凹的位置會發現改變（文字資料流對相對定位對象還存在影響），但是凹處到西瓜出現的距離始終保持一致。可見文字資料流與它之間還會互相影響，因為對象並沒有真正脫離文字資料流，就像有兩個人在同一層樓水平移動的過程中會有碰頭的機會。
（3）總結兩種定位的特徵
絕對位置就像是把不同對象安排到了一棟高樓的不同樓層(一般指不是第一層，我們這裡理解為文字資料流就放在首層)，它們互不影響，但是它們怎麼移動與你樓的地基和面積（父級）有關。相對定位指對象還是在首層樓與文字資料流一起存放，它們之間肯定存在影響。
（4）對特殊情況的補充
在用相對定位和絕對位置的時候，有一種情況是它們的定位值用到了負值則對象可沿相反方向移動，剛才說到的把對象安排在一棟樓的不同層，如果某個對象一開始就是背靠著最外邊牆的，此時再用一個負值定位它，它就會神奇般地跑出牆外去了，當然現實中可沒有這種驚險而又神奇的事發生，本人只為了延用上面的比如作形象解釋。
（1）無定位設定，對象遵循HTML定位規則。一般是子級不會跑出父級外邊去（子級沒有使用負邊界情況），子級一般是靠在父級左上方的，父級放在最下層。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無定位設定,對象遵循HTML定位規則</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #33CCFF; height: 200px; width: 200px; } .box2 { background-color: #66CC66; height: 100px; width: 100px; } --> </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（2）給設定了定位屬性的對象指定left，right，top，bottom屬性中的至少一個，不然定位不起作用。下面執行個體中雖然給box2設定了定位屬性position: absolute，但是如果沒有指定其中一個方位定位值top: 0px，定位是不發生作用的，你可以刪除我注釋的樣式再測試效果進行前後對比。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>給定位對象指定一個方位元值</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #33CCFF; height: 200px; width: 200px; } .box2 { background-color: #66CC66; height: 100px; width: 100px; position: absolute; top: 0px;/*如果沒有指定一個方位定位屬性和值,絕對位置不起作用,你可以刪除這一項看一下效果*/ } --> </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（3）絕對位置對象可以層疊，層疊順序用z-index控制，如果沒有指定則遵循其父物件的定位方法，就目前來說要做到不同瀏覽器正常瀏覽，最好不要給z-index指定負值，因為像FF這樣標準的瀏覽器不支援負值，為瞭解釋這一現象，下面執行個體中的最底層圖片我用到了負值，所以會出現在IE中可以看到3幅圖層疊，而轉到FF中你就只能看到兩幅圖層疊了。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>絕對位置對象可以層疊,層疊順序可用z-index控制,但最好不要用負值,因為FF不支援</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #33CCFF; height: 200px; width: 270px; background-image: url(http://farm1.static.flickr.com/80/251133988_e0b8174060_m.jpg); background-repeat: no-repeat; background-position: center center; position: absolute; left: 10px; top: 10px; z-index:-1;/*這裡用了負值,在標準瀏覽器,如FF中是不能正常顯示的*/ } .box2 { background-color: #66CC33; height: 200px; width: 270px; background-image: url(http://farm1.static.flickr.com/6/76318014_e50414fe42_m.jpg); background-repeat: no-repeat; background-position: center center; position: absolute; left: 50px; top: 50px; } .box3 { background-color: #996699; height: 200px; width: 270px; background-image: url(http://farm1.static.flickr.com/48/172522117_410a1e87c1_m.jpg); background-repeat: no-repeat; background-position: center center; position: absolute; left: 100px; top: 100px; } --> </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（4）相對定位對象會佔據它原來位置，在下面執行個體中，沒有設定相對定位前，綠色小盒子是在藍色盒子左上方的，之前也設定了綠色小盒子的浮動方式為左浮動，可以看到文本環繞在它右邊，但是後來用相對定位方法把綠色小盒子重定位到外面去了，它還佔著自己原來位置，因為你還可以看到文字資料流沒有發生自動填補流動。因此這種直接的相對定位方法較少用，因為重定位對象後原來位置空了一塊。相對定位常與絕對位置結合用，一般是給父級設定相對定位方式，子級元素就可以相對它進行方便的絕對位置了（請注意看後面的執行個體）。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>相對定位對象會佔據原有位置</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; line-height:12pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #3CF; height: 200px; width: 200px; } .box2 { background-color: #6C6; height: 100px; width: 100px; position: relative; float: left; top:-120px; } --> </style> </head> <body> <div class="box1"> <div class="box2"></div> [相對定位對象會佔據原有位置]現在綠色小盒子是以子盒子形式存在藍色大盒子中，並設定了浮動方式為左浮動，所以這些文字能環繞在它右邊，當綠色小盒子用相對定位方法重定位到外邊去了，文字還是不能流入它的地區，即左上方空白地區，那是因為綠色盒子還佔用著它原來位置。</div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（5）相對定位的對象不可以重疊。這一點也許比較難理解，先來這樣理解吧，因為相對定位的對像沒有脫離文字資料流，就像兩個還是住在同一層樓的人，任何時候，他們腳下踩的地方不可能被另一個人踩著的，如果可以就意味著兩個人共用一塊地方了。在下面的執行個體中，兩個小盒子都剛好排在大盒子上方，所以在大盒子中輸入的文字被擠到了下面。上面兩個盒子我再用相對定位的方法對調了它們的位置，當前它們下方的空間其實不是自己的，也正因為它們沒有重疊，所以盒子上方還是有兩個盒子佔用的空間，下面文字無法向上流動（我已對盒子設定了浮動屬性的了，如果不設定，即使有空間文本也不會往上流，上面盒子是區塊層級元素，會獨立佔據一行）。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>相對定位對象不可層疊</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; line-height:12pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #33CCFF; height: 200px; width: 210px; padding:5px; } .box2 { background-color: #66CC66; height: 100px; width: 100px; position: relative; float: left; left:100px; } .box3 { background-color: #CC99FF; height: 100px; width: 100px; position: relative; float: left; right:100px; } --> </style> </head> <body> <div class="box1"> <div class="box2">我家在左邊</div> <div class="box3">我家在右邊</div> 相對定位對象是在正常文字資料流中移動的，所以它的存在還是會影響文字資料流的布局， 如果是絕對位置，這些文本應向上流入上方兩個盒子的底部了。 </div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（6）高度自適應的妙用。在下面執行個體中，右邊的紫色小盒子高度是沒有設定的，它的高度是隨著裡面內容的增加而增高的，但我們又可以通過絕對位置方法把它始終定位在父盒子的右上方。同理，我們也可以只設定高度而讓寬度自動隨內容增加而變寬。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>高度自適應的妙用</title> <style type="text/css"> <!-- body { margin:5px; font-size: 9pt; } .box1 { background-color: #33CCFF; height: 500px; width: 500px; position: relative; } .box2 { background-color: #CC99FF; width: 100px; position: absolute; right:3px; top:3px; text-align: center; line-height:15pt; } .box3 { width: 390px; height:500px; position: absolute; left:0px; top:0px; line-height:15pt; border-right: thin dashed #999; } --> </style> </head> <body> <div class="box1"> <div class="box3">右邊的小盒子高度是沒有設定的，它的高度是隨著裡面內容的增加而增高的，但我們又可以通過絕對位置把它始終定在父盒子的右上方。</div> <div class="box2"> <p>藍色理想<br /> 經典論壇<br /> 業界動態<br /> 技術文檔 </p> </div> </div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（7）給包含塊一個高度，或者說給定位對象的父級設定一個高度。不然也許顯示的結果並不是你想要的。在下面的例子中，如果你本意要實現下面效果：把小盒子在父盒子中的左上方垂直往下位移，上方留出一塊地區，如果你刪除了box1的高度會怎麼樣呢？自己測試一下吧。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>給包含塊一個高度</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; line-height:12pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #33CCFF; width: 200px; height: 200px;/*如果不設定這個高度，也許顯示的結果並不是你想要的*/ } .box2 { background-color: #CC99FF; height: 100px; width: 100px; position:relative; bottom:-100px; } --> </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（8）放置絕對位置對像到可視區外會出現捲軸。一般情況下，絕對位置是用來方便定位網頁要看得見元素的，而不是拿它來隱藏對象的，一般隱藏對象常用到display與margin，如果你試圖把絕對位置的對象移出可視地區，嘿嘿，瀏覽器會為你準備捲軸去看望它。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>放置絕對位置對像到可視區外會出現捲軸</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; line-height:12pt; } .box{ background-color: #996699; height: 200px; width: 270px; background-image: url(http://farm1.static.flickr.com/48/172522117_410a1e87c1_m.jpg); background-repeat: no-repeat; background-position: center center; position: absolute; left: 900px; top:0px; } .box2{ height: 200px; width: 270px; border: 1px dashed #996699; } --> </style> </head> <body> <div class="box2">這是右邊對象原來所在的位置，即沒有被賦予定位屬性前的位置</div> <div class="box"></div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（9）放置相對定位對像到可視區外不會出現捲軸。此現象很好理解，因為相對定位對象原來位置沒有變，原來位置沒有出去捲軸就不會出現。在下面執行個體中，如果你縮小瀏覽器視窗，相對定位的對象還會出現完全消失的情況呢。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>放置相對定位對像到可視區外不會出現捲軸</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; line-height:13pt; } .box{ background-color: #996699; height: 200px; width: 270px; background-image: url(http://farm1.static.flickr.com/48/172522117_410a1e87c1_m.jpg); background-repeat: no-repeat; background-position: center center; position: relative; left: 900px; } .box2{ height: 200px; width: 270px; position:absolute; border: 1px dashed #996699; } --> </style> </head> <body> <div class="box2">虛線框是右邊盒子原來的位置，即用了相對定位後，把對象重新置放到了右邊，但對象的位置其實還在這裡，或者說對象實際上並沒有越出瀏覽器可視地區，所以不會出現捲軸。<br /> 我說過相對定位的的盒子原有位置是不會被佔用的，但我為什麼可以在這裡寫說明呢，這是因為我用了絕對位置，我只是為了方便說明才這樣做的，請不要誤解了。</div> <div class="box"></div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（10）定位的特殊值情況。如果定位設定是這樣的：position:relative ，right:200px， left:10px會出現什麼情況呢？一邊叫對象向右位移10px，另一邊又叫對象向左位移200px，到底是聽那邊的呢，還是那個先，那個後呢。針對這種矛盾情況，CSS規定只聽左邊的left，而右邊怎麼設定都被重定為-left,即-left =right。上下值top與bottom矛盾的話，就以top為準，所以在下面的執行個體中，你如何改變right的值，對象位置不會發生改變的。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>定位的特殊值情況</title> <style type="text/css"> <!-- body { margin:0px; font-size: 9pt; line-height:12pt; margin-top: 150px; margin-left: 150px; } .box1 { background-color: #33CCFF; width: 200px; height: 200px; } .box2 { background-color: #CC99FF; height: 100px; width: 100px; position:relative; right:200px;/*此值總被認為是-left=-10px,所以你怎麼改它都不會影響到布局*/ left:10px;/*這裡設定了兩個定位值，但是它們是矛盾的，所以此時將以左邊為準，如果是上下類型錯誤，則以上邊定位元值為準*/ } --> </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
4．綜合執行個體見證定位的魅力
先看最終示範效果，具體教程請繼續關注，本人正抽空整理。
運行代碼框
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>相對定位和絕對位置執行個體--作者：唐國輝</title> <style type="text/css"> <!-- *{ margin:0px; padding:0px; } body { margin:10px; font-size: 13px; } a:link { color: #666; text-decoration: none;/*去除連結底線*/ } a:visited { color: #666; text-decoration: none; } a:hover { color: #F90; } h3 { color: #FFF; background-color: #F90; width: 100px; padding-top:3px; text-align:center; } ul { width: 300px; border-top: 1px solid #F60;/*使其上邊有一線條，與標題h3吻合*/ } ul li { padding:5px; border-bottom: 1px solid #CCC; list-style:none;/*去除列表樣式，這對於標準瀏覽很重要*/ } a { position: relative;/*設定其定位方法為相對定位，等一下內部資訊面板就可以相對它定位*/ display:block;/*讓連結以塊狀呈現，這樣不用點中連結文字就可以響應連結*/ } a div { display: none;/*初始化資訊面板不顯示*/ } a:hover {background:#fff;}/*IE7以下版本A狀態偽類bug*/ a:hover div { position: absolute; padding:5px; display:block; width: 245px;/*只給出寬度，高讓它隨內容多少自動調整*/ left:150px;/*這是相對父級A的定位*/ top: 20px; border: 1px solid rgb(91,185,233); background-color: rgb(228,246,255); z-index:999;/*把資訊面板提到一個較高的位置，使連結文字過長時不會與面板重疊,但這隻對FF有效*/ } a img { width:80px; height:80px; border:none;/*去除圖片邊框，預設情況下，連結內的圖片在標準瀏覽器會出現邊框*/ display:block; position: absolute;/*用絕對位置抽離正常文字資料流，不然在設計的時候考慮到不同瀏覽器正常顯示會更麻煩*/ top:5px;/*這裡的5px是與資訊面板大盒子的填充一樣的*/ left:5px; } dl { width: 160px; float:right; color: #999; line-height:20px; } dl dd span { font-weight: bold; color: #639; } --> </style> </head> <body> <h3>最新單曲</h3> <ul> <li><a href="#">01 愛的文身 黃聖依<div><img src="/net/UploadFiles_5419/200706/20070613014342345.jpg" alt="" /> <dl> <dd><span>歌名:</span>愛的文身</dd> <dd><span>歌手:</span>黃聖依</dd> <dd><span>介紹:</span>黃聖依唱片主打歌的確是她個人的內心寫照，《愛的文身》由香港音樂大師金培達作曲，製作人陳少琪親自填詞。</dd> </dl></div></a></li> <li><a href="#">02 累了 阿信<div><img src="/net/UploadFiles_5419/200706/20070613014342715.jpg" alt="" /> <dl> <dd><span>歌名:</span>累了</dd> <dd><span>歌手:</span>阿信</dd> <dd><span>介紹:</span>青春校園偶像劇----【熱情仲夏】片尾曲</dd> </dl></div></a></li> <li><a href="#">03 漫漫 慢慢 阿朵<div><img src="/net/UploadFiles_5419/200706/20070613014342470.jpg" alt="" /> <dl> <dd><span>歌名:</span>漫漫 慢慢</dd> <dd><span>歌手:</span>阿朵</dd> <dd><span>介紹:</span>阿朵搶聽版最新單曲《漫漫 慢慢》讓你認識阿朵柔情的一面，展現阿朵百變的風格。</dd> </dl></div></a></li> <li><a href="#">04 我懷念的 孫燕姿<div><img src="/net/UploadFiles_5419/200706/20070613014342503.jpg" alt="" /> <dl> <dd><span>歌名:</span>我懷念的</dd> <dd><span>歌手:</span>孫燕姿</dd> <dd><span>介紹:</span>令人感同身受的抒情歌，在故事性的架構中，有著平凡但又能扣人心弦的情感，是一首高度共鳴的抒情歌。</dd> </dl></div></a></li> <li><a href="#">05 聽,花期越來越近 後弦<div><img src="/net/UploadFiles_5419/200706/20070613014342526.jpg" alt="" /> <dl> <dd><span>歌名:</span>花期越來越近</dd> <dd><span>歌手:</span>後弦</dd> <dd><span>介紹:</span>後弦參與《花開的聲音》這個舞台劇裡的一部分，邀請了後弦去演唱這首歌，此歌就是為舞台劇《花開的聲音》而創作。</dd> </dl></div></a></li> </ul> </body> </html>
[/code]
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
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
