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