基于HTML5+CSS3的网页布局
2017-12-21 21:30葛蓝
数字技术与应用 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）.
