最近做了一個簡潔風個人網站主頁，和大家分享一下。界面如圖，（換了兩張背景圖片）：
一、界面：背景爲一組自定義圖片，中間一個透明標籤，標籤內包含header，content，footer三部分；
二、基礎功能：點擊header部分“個人網站”鏈接可以隨機切換背景圖片；
點擊content部分“CSDN博客日誌(blog)”鏈接跳轉至我的csdn博客主頁；“more”是一個按鈕鏈接，據個人情況可以鏈接至自己想展示的內容網頁。
本篇博客先介紹一下頁面的靜態佈局:
首先分析一下該頁面的構成。該頁面由背景圖片和中間的標籤組成。那麼，中間的標籤爲主要的刻畫對象。
<body>
<div id="container">
<div id="container-inner">
<!-->中間標籤<-->
<div>
</div>
</body>
標籤又分爲上中下三部分，分別是header,content,footer.
1.header部分：有一個鏈接（h1標籤，a標籤）和一個文本顯示（p標籤），橫線（hr標籤）；
2.content部分：鏈接（p標籤，a標籤），橫線（hr標籤）；
3.footer部分：“more”按鈕鏈接（button標籤，a標籤）。
完整的靜態佈局爲：
<!--標籤整體容器-->
<div id="container">
<!--內容-->
<div id="container-inner">
<!--頁頭 -->
<div id="header">
<div id="header-content" >
<h1 id="change"><a href="js:bgImage();">個人網站</a></h1>
<p>Zheng XiaoXue's Personal Website</p>
<hr class="hr1"/>
</div>
</div>
<!-- 中間部分-->
<div id="content">
<div id="main-content">
<div id="main-content">
<p><a href="http://blog.csdn.net/qq_38177305">CSDN博客日誌(blog)</a></p>
</div>
<div>
</div>
<!--頁腳-->
<div id="footer">
<div id="footer-container">
<div id="footer-content">
<hr class="hr2"/>
<button><a href="#">more</a></button>
</div>
</div>
</div>
</div>
</div>
效果如下：
靜態佈局完成，下一篇更CSS樣式設置。
