html5和css3扁平化风格博客

目标：
1，理解网页布局的结构
2，掌握网页布局的基本步骤
3，掌握博客类网页布局思想

模块分析：
扁平化风格布局：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可以生成毫无意义的文字填充。