HTML5和CSS3扁平化风格博客教程的资源分享

本课程通过css3扁平化风格博客的实例详细讲解，让大家更容易理解常规网页的组成部分，灵活的使用不同部分web组件，理解它的构成思想，以及网页灵活的布局和设计。我们也可以由宏观到微观去掌握整体的布局。

课程播放地址：http://www.php.cn/course/307.html

该老师讲课风格:

教师讲课深入浅出，条理清楚，层层剖析，环环相扣，论证严密，结构严谨，用思维的逻辑力量吸引学生的注意力，用理智控制课堂教学进程。学生通过听教师的讲授，不仅学到知识，也受到思维的训练，还受到教师严谨的治学态度的熏陶和感染

立即学习“前端免费学习笔记（深入）”；

本视频中较为难点是html5和css3扁平化风格博客了：

模块分析： 
扁平化风格布局：header和body 
页面组件分析： 
1，header（页头）： 
①h1>a，放首页链接，一般建议一个页面只有一个h1，其他可以用h2，h3等，酱紫有利于页面优化 
②nav>ul>li>a>span,层层嵌套menu，主要运用结构化方式，因为不能确定导航栏需要多少个按钮或链接， 
2，banner部分：inner部分+向下滚动按钮 
①div>h2+ul, 
h2>p 
ul>li>a 
②a 
3,正文 section1 
①section>div>header+ul 
header>h2>p 
header写标题副标题 
ul>li>a同级标题 
inner用来约束整个页面的宽度 
3,正文 section2 
section>section>div1+div2 
div1>img 
div2>h2+p 
如果没有很强的列表属性的话，可以用div来写。 
4，section3和4略 
5，footer页脚部分 
footer>ul+ul,此处适合用div或者span。

一，重置样式及文件结构： 
重置样式的目的： 
使样式在不同浏览器下保持一致， 
网址：cssreset.com样式重置官网， 
常用网址：necolas.github.io/normalize.css 浏览器常规化，可直接引入

二，页面大框架分析： 
头部header+内容content+页脚footer 
头部>导航nav>主题banner

三，页头的结构分析及布局 
※在sublime编辑器里输入lorem+tab可以生成毫无意义的文字填充。

以上就是HTML5和CSS3扁平化风格博客教程的资源分享的详细内容，更多请关注php中文网其它相关文章！