基于HTML5+CSS3的網頁布局
2017-12-21 21:30:01葛藍
數字技術與應用 2017年10期
葛藍
摘要：隨著互聯網產業的高速發展，如今HTML5和CSS3已成為主流的Web前端開發技術，與以往版本相比，HTML5新元素及其特性HTML5的語義化標簽以及屬性，可以讓開發者非常方便地實現清晰的web頁面布局，加上CSS3的效果渲染，快速建立豐富靈活的web頁面顯得非常簡單。本文以一個簡單的鮮花網站首頁為例，介紹基于Html5+CSS布局的網頁。
關鍵詞：HTML5；CSS；網頁布局
中圖分類號：TP273 文獻標識碼：A 文章編號：1007-9416（2017）10-0092-02
隨著互聯網產業的高速發展，HTML超文本標記語言作為構建web世界的基礎語言，也經歷了數次發展。2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，HTML5標準規范終于制定完成。如今HTML5和CSS3已成為主流的Web前端開發技術，與以往版本相比它具有許多新特性，例如，HTML5引入非常多的描述性標簽來創建更好的頁面結構，例如用于定義頭部的header標簽、定義尾部的footer標簽、定義導航的nav標簽、定義側邊欄aside標簽等，HTML5新元素及其特性HTML5的語義化標簽以及屬性，可以讓開發者非常方便地實現清晰的web頁面布局，加上CSS3的效果渲染，快速建立豐富靈活的web頁面顯得非常簡單。
本文以一個簡單的鮮花網站首頁為例，介紹基于Html5+CSS布局的網頁。
1 Html5布局頁面
1.1 HTML5的文檔聲明，新建index.html文件，生成如下的HTML5模板
（1）<！DOCTYPE html>；（2）；（3）；（4）；（5）
/*在網頁頭部放入Logo*/
同一個頁面中可以包含多個
1.3 導航的實現
1.4 區塊和文章
/*article的內容*/
1.5 側邊欄實現
1.6 尾部標簽的實現
Footer
2 CSS3美化頁面
CSS即層疊樣式表，在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。鑒于篇幅有限，此處僅對頁面主要標簽定義CSS樣式。
2.1 頁面整體屬性
2.2 頭部標簽屬性
2.3 導航條的屬性
2.4 區塊屬性
2.5 側邊欄屬性
2.6 尾部屬性
通過HTML5+CSS3布局并美化頁面，完成簡單頁面布局，效果如圖1所示。
參考文獻
[1]白蕾，郭清菊.HTML5與CSS3的設計模式[J].智能計算機與應用，2016，（02）.
[2]鄭偉.對CSS3盒模型邊框應用的研究[J].電腦知識與技術，2016，（36）.
[3]王艷.探析HTML5與CSS3在網頁設計中的新特性和優勢[J].電腦編程技巧與維護，2016，（21）.
