者：明明如月

审校：蓝色漂流瓶

本文讲的是啥？

本文为你提供一篇HTML5基本布局模板示例。你可以直接拷贝，粘贴到你的HTML文件中并对其进行修改。

好，说实话，这个本是为我自己准备的html5布局模板，但是你可以拿来用。

译者注：由于无法直接粘贴代码，需要的亲直接进入尾部提供的链接，拷贝下来即可。

虽然本文比较简单（喷子止步），但是还是一个不错的模板，可以存起来，或者参考一下人家的结构。

基本的HTML5 模板布局模板：

代码如下：

图片格式

带头部、尾部和导航的基本的HTML5布局模板

图片格式

英文源：http://www.codeshare.co.uk/blog/basic-html5-template-layout-example/

要源码请评论后加前端学习群470593776

课题：HTML5炫酷雪花飘落动态网页背景

特点：无任何js痕迹，纯css3动画，需要熟练掌握html5新特性。

对于细节和兼容性的处理要到位，代码量很少，布局仅需一行代码，一个DIV

可以作为一个网页的背景图！

源码：

PS：因为代码不方便阅读以及复制，所以只发部分源码思路

完整的免费源码及思路讲解，请评论后加前端学习交流群470593776获取！

需要源码请评论后加前端学习群470593776

要学习Web前端，在学习之前一定要有详细的学习路线图，有详细的计划并心中有数，才能在学习的过程中不至于迷失方向，下面跟着千锋教育HTML5大前端培训小编来看看路线图的具体内容：

1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学习目标是完成PC端网站布局，WebApp页面布局，还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。

2、JavaScript高级课程、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等。学习目标是可以通过原生JavaScript开发交互功能，实现网站上的交互效果，以及模块化应用等，实现完整的前端工程。

3、Web前端框架、混合开发(Hybrid，RN)、大数据可视化。主要内容为Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid，RN)、Angular前端框架、大数据可视化等。学习目标是可以独立完成相应的项目，如微信场景，应用Vue.js/Ionic/React.js等框架开发WebApp，微信小程序项目开发，以及各类混合应用项目开发等。

想要成为一名合格的Web前端工程师是需要一些的时间的，尤其对于初学者，更要有一定的耐心和进取心，在学习中要将所学知识与实战相结合，才能成为一名上岗即用的Web前端工程师。