簡潔風個人主頁（1） html 靜態佈局
阿新 • • 發佈：2019-01-22
最近做了一個簡潔風個人網站主頁，和大家分享一下。介面如圖，（換了兩張背景圖片）：
一、介面：背景為一組自定義圖片，中間一個透明標籤，標籤內包含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樣式設定。
