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