實例作品
<html>
<head>
<title>塊的背景色問題</title>
<style>
<!--
body{
margin:0px; padding:0px;
font-family:arial;
background-color:#f8e5a9; /* 設置成跟#right塊一樣 */
}
#container{
margin:0px; padding:0px;
background:url(bg2.jpg) repeat-y; /* 用背景圖片填補#left的空白，又不影響#right */
}
#left{
position:absolute;
top:0px;
left:0px;
margin:0px;
background:#afdcff;
width:190px;
}
#middle{
position:relative;
padding:1px 15px 10px 15px;
margin:-10px 190px 0px 190px;
font-size:13px;
background:#e9fbff url(bg1.jpg) no-repeat bottom right;
}
#right{
position:absolute;
top:0px;
right:0px;
margin:0px;
background:#f8e5a9;
width:190px;
padding:20px 0px 20px 0px;
font-size:12px;
}
#left ul{
list-style:none;
margin:1em 20px 0px 0px;
padding:0px 0px 15px 22px;
}
#left li{
font-size:80%;
border-bottom:1px dotted #B2BCC6;
margin-bottom:0.3em;
}
#left a:link, #nav a:visited{
text-decoration:none;
color:#2A4F6F;
background-color:transparent;
}
#left a:hover{
color:#778899;
}
#left h2{
font:110% 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;
}
#footer{
font-size:12px;
width:100%;
padding:3px 0px 3px 0px;
text-align:center;
margin:0px;
background-color:#b0cfff;
position:relative;
}
#right img{
border:1px solid #0073cc;
margin-bottom:5px;
}
#right p{
text-align:center;
padding:0px 15px 0px 15px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="mainbox">
<div id="left">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">精華區(qū)</a></li>
<li><a href="#">收藏夾</a></li>
<li><a href="#">分類討論區(qū)</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>
</div>
<div id="middle">
<h4>轉播設備</h4>
<p>我現(xiàn)在是在萬泉河附近，我們的轉播車就在旁邊不遠的地方，師傅馬上將會把車開過來。我們的轉播設備非常非常的先進，具體怎么先進我也說不清，師傅比我清楚，總之就是特別特別的先進。好，現(xiàn)在師傅已經來了?！?BR> </p>
<h4>旅程</h4>
<p>夕陽 染紅藍天<br>
帶走 美好的一天<br>
風 吹過大地<br>
炫美的世界<br>
<br>
霞光 點亮星辰<br>
燃起 遼遠的夢幻<br>
流星 劃過夜空<br>
憶起 逝夜的歌聲<br>
<br>
是誰昨夜背上行囊<br>
唱一首滿載風塵的歌<br>
今夜才又想起擁抱的時刻<br>
<br>
獨自走的一段旅程<br>
是否還裝滿苦澀<br>
一路風雨飄搖 那坎坷對誰說<br>
<br>
來吧看這遠處亮起的點點星火<br>
伸手觸摸那寫在匆匆旅程的歌<br>
誰在轉過的街口從容揮手<br>
誰用歡笑和擁抱<br>
記住這一刻
</p>
</div>
<div id="right">
<p><img src="pic1.jpg"><br>永遠的記憶</p>
<p><img src="pic2.jpg"><br>匆匆的腳步</p>
<p><img src="pic3.jpg"><br>溫暖而忙碌</p>
</div>
</div>
<div id="footer">版權所有 2006.12.7 Next Station</div>
</div>
</body>
</html>
湘公網安備 44010402000311號