<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>頁面排版左中右版式</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> /*主體*/ body{ margin:0px; padding:0px; font-family:arial; background-color:#f8e5a9; } /*整個容器*/ #container{ margin:0px; padding:0px; background:url("images/bg.jpg") repeat-y; } /*左側部分*/ #left{ position:absolute; top:0px; left:0px; margin:0px; background:#afdcff; width:190px; } /*中間部分*/ #middle{ position:absolute; padding:1px 15px 10px 15px; margin:-10px 190px 0px 190px; font-size:13px; background:#f8e5a9 url("images/bg.jpg") no-repeat bottom right; } /*右側部分*/ #right{ position:absolute; top:0px; right:0px; margin:0px; background:#afdcff; width:190px; padding:20px 0px 20px 0px; font-size:12px; } /*左側部分之標題1*/ #left h1{ font:150% Georgia, "Times New Roman", Times, serif; font-weight:bold; color:#2a4f6f; text-align:center; padding:0px 5px 0px 12px; } /*左側部分之項目列表*/ #left ul{ list-style:none; margin:1cm 20px 0px 0px; padding:0px 0px 15px 22px; } /*左側部分之項目列表項*/ #left li{ font-size:130%; border-bottom:1px dotted #b2bcc6; margin-bottom:0.1cm; } /*左側部分之超連接*/ #left a:link, #nav a:visited{ text-decoration:none; color:#2a4f6f; background-color:transparent; } #left a:hover{ color:#778899; } #left h2{ font:150% Georgia, "Times New Roman", Times, serif; font-weight:bold; color:#2a4f6f; padding:0px 5px 0px 12px; text-decoration:underline; } #middle h4{ text-decoration:underline; color:#0078aa; padding-top:15px; font-size:16px; } /*中間部分之段落*/ #middle p{ font-size:150%; } /*頁腳部分*/ #footer{ font-size:12px; width:100%; padding:3px 0px 3px 0px; text-align:center; margin:0px; background-color:#b0cfff; position:relative; } /*右側部分之img*/ #right img{ border:1px solid #0073cc; margin-bottom:5px; width:150px; height:150px; } #right p{ text-align:center; padding:0px 15px 0px 15px; } </style> </head> <body> <div id="container"> <div id="mainbox"> <div id="left"> <h1>@一別經年</h1> <ul> <li><a href="#">首頁</a></li> <li><a href="#">精華區</a></li> <li><a href="#">收藏夾</a></li> <li><a href="#">分類討論區</a></li> <li><a href="#">郵箱</a></li> </ul> <h2>經典推薦</h2> <ul> <li><a href="#">一塊兒走到</a></li> <li><a href="#">從明天起</a></li> <li><a href="#">紙飛機</a></li> <li><a href="#">下一站</a></li> </ul> <p><img src="images/1.gif"></p> </div> <div id="middle"> <h4>依然愛你</h4> <p>過完整個夏天,憂傷並無好一些。開車行駛在公路無際無邊。唱不完一首歌,疲倦還剩下黑眼圈,感情的世界的傷害在所不免。依然記得從你口中說出...... </p> <h4>旅程</h4> <p>夕陽 染紅藍天<br/> 帶走 美好的一天<br/>風 吹過大地<br/>炫美的世界<br/><br/> 霞光 點亮星辰<br/>燃起 遼遠的夢幻<br/>流星 劃過夜空<br/>憶起 逝夜的歌聲<br/> </p> </div> <div id="right"> <p><img src="images/g1.jpg"><br/>永遠的記憶</p> <p><img src="images/g2.jpg"><br/>匆匆的腳步</p> <p><img src="images/g3.jpg"><br/>溫暖而忙碌</p> </div> </div> <div id="footer">版權全部 2014.04.14</div> </div> </body> </html>