模板模式
对于前端来说bootstrap其实不是很好的选择，因为它共性与个性都结合为一体，然而前端面对各种设计，我们只需要共性的部份。
你会问共性是什么？共性其实就是习惯，规则。现在网页发展到现在是以一个默定的模式进行的，有这些模式共性是因为各种的原因，
主因还是因为硬件和网络的发展很慢，为了省性能设计师们都在妥协，至今大部份网页还是采用2D的文字和图片框，新技术却实已经
在应用中，但可惜受限条件的影响，这里说的个性就是风格和样式。
开始构建模板模式
现在网页常用的元素有导航，页脚，标题，正文，列表， slider-幻灯片，tab-滑动门，Collapse-手风琴，小图标，表单等等。
在HTML部份中HTML5已经成为了主流：
HTML简洁的代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> </head> <body> </body> </html>
移动设备也成为了主流,在head中 加入
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
市场上主流的浏览器有不少，但他们的默认各有不同，所以我们需要一份 resets
首选要确定常用的结构风格模式，在网页中有几个主流的结构布局：
HCF（上-头，中-内容，下-脚）
SC (左-侧导航 ,右-内容)
CS （左-内容，右-侧导航）
HC （上-头，下-内容）
C （单一）
2.快速写出基本代码
HCF
<header> <div class="hb bb"> <div class="container"> <div class="login">Login</div> </div> </div> <div class="hb bb"> <div class="container"> <div class="logo"><a herf="#">Logo</a></div> <nav> <ul class="meun"> <li><a herf="#">首页</a></li> <li><a herf="#">论坛</a></li> <li><a herf="#">版块</a></li> <li><a herf="#">影视</a></li> <li><a herf="#">官网</a></li> </ul> </nav> </div> </div> </header> <section> <div class="container"> <main class="main"></main> <aside class="sidebar"></aside> </div> <section> <footer> <div class="fb"> <div class='container'></div> </div> </footer>
在定义class 时 为了在不停的写样式表能累积的样式能够复重，就需要制定一套基本的规则
制定样式风格的名称 .post-this
<div class="post-this"> <article class="post"> <div class="img"><a href="#"><img src="#" alt="" border="0"></a></div> <div class="hd"> <h2 class="title">Title</h2> </div> <div class="bd"> <p>内容。</p> </div> </article> </div>
在写样式经常需要一些用来布局与说明的样式，这部份的样式在不同的样式中它们的属性都是不变的。
比如用来制定最外围宽度的 containet， 用来布局的主体和侧栏的布局的栅格与用来说明的 hd bd
在post-this 中 post-this 风格的样式表里面的 class 名称都不需要有改变
.post-this{}定义边框，边距，背景
.post-this .title{} 定义标题风格
.post-this>.bd>p 定义内容风格
在不改布局只需要改变 风格 .post-this 就可以改变样式
<div class="post-two"> <article class="post"> <div class="img"><a href="#"><img src="#" alt="" border="0"></a></div> <div class="hd"> <h2 class="title">Title</h2> </div> <div class="bd"> <p>内容。</p> </div> </article> </div>
在风格 post-this 对应元素风格相对应，一般带有边距，背景，都需要对应的元素样式
.post-this .title-d 标题风格一
.post-this .title-t 标题风格二
在风格有多套的元素样式可以相互替换，这里与上面不改变上面的元素class名有矛盾，所以如果风格下有多套的元素样式
就需要制定一些规则，统一的命名：.post-this .title 作为默认的元素样式，那当使用第二套的样式时就统一命名，.post-this .title-ts
对于单独通用的元素样式可以取个性的命名，这样当你不停的写样式就能够累积复用的素材。
可编程的CSS
对于一些常用的小设定的样式，比如：float:left; 可以命名 .fl ，清除浮动也可以用 .clean,但是对于一般边距，有关数值的设定就需要
一种可以编程的CSS，比如边距20px .m20 代表 margin :20, mt20代表 margin-top:20px ,当数值变化时，margin:30 是否又要重新
定义一个样式?可编程就可以带来很多的便利。
