實例作品
<html>
<head>
<title>個人主頁</title>
<style>
<!--
body, html{
margin:0px; padding:0px;
text-align:center;
background:#e9fbff;
}
#container{
position: relative;
margin: 0 auto;
padding:0px;
width:700px;
text-align: left;
background:url(container_bg.jpg) repeat-y;
}
#banner{
margin:0px; padding:0px;
}
#links{
font-size:12px;
margin:-18px 0px 0px 0px;
padding:0px;
position:relative;
}
#links ul{
list-style-type:none;
padding:0px; margin:0px;
width:700px;
}
#links ul li{
text-align:center;
width:100px;
display:block;
float:left;
}
#links br{
display:none;
}
#leftbar{
background-color:#d2e7ff;
text-align:center;
font-size:12px;
width:150px; float:left;
padding-top:20px;
padding-bottom:30px;
margin:0px;
}
#leftbar p{
padding-left:12px; padding-right:12px;
}
#content{
font-size:12px;
float:left; width:550px;
padding:5px 0px 30px 0px;
margin:0px;
background:url(bg1.jpg) no-repeat bottom right;
}
#content p, #content h4{
padding-left:20px; padding-right:15px;
}
#footer{
clear:both; font-size:12px;
width:100%;
padding:3px 0px 3px 0px;
text-align:center;
margin:0px;
background-color:#b0cfff;
}
.pic1{
border:1px solid #00406c;
}
p.leftcontent{
text-align:left;
color:#001671;
}
h4{
text-decoration:underline;
color:#0078aa;
padding-top:15px;
font-size:16px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="banner">
<img src="banner1.jpg" border="0">
</div>
<div id="links">
<ul>
<li>首頁</li>
<li>心情日記</li>
<li>Free</li>
<li>一起走到</li>
<li>從明天起</li>
<li>紙飛機</li>
<li>下一站</li>
</ul>
<br>
</div>
<div id="leftbar">
<p><img src="selfpic1.jpg" class="pic1">
<br>我的日記本</p>
<p class="leftcontent">秋天過半的時候,我搭上了一列火車。我不知道它將要去往的方向,那鐵路看上去無休無止地延伸著。</p>
<p><img src="selfpic2.jpg" class="pic1">
<br>心情軌跡</p>
<p class="leftcontent">無意間發(fā)見,白云的上面,長著許許多多的蒲公英。它在我面前迅速的長大,風吹過的時候,紛紛升起,飛向無數(shù)的遠方。</p>
</div>
<div id="content">
<h4>介紹</h4>
<p>火車經過一個又一個站臺,窗外漫卷的蒲公英向我微笑著。我逐漸記起了自己旅行的目的,一直都在下一站的前方。火車緩緩地駛入站臺,汽笛聲響的那一瞬間,車廂變得透明,我看見,自己和這長長的列車一起,正在漫天飄舞著的蒲公英中飛行。</p>
<h4>轉播設備</h4>
<p>我現(xiàn)在是在萬泉河附近,我們的轉播車就在旁邊不遠的地方,師傅馬上將會把車開過來。我們的轉播設備非常的先進,具體怎么先進我也說不清,師傅比我清楚,總之就是特別特別先進。好,現(xiàn)在師傅已經把轉播車開過來了!
</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="footer">版權所有 2006.12.7 Next Station</div>
</div>
</body>
</html>