簡潔風個人主頁(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樣式設定。