+
+###构建HTML结构###
+```html
+ 
+###构建HTML结构###
+```html
+ 
+
+>Bootstrap毫无疑问是现今框架的领导者。他不仅仅流行，每天用户量也在不断增长。你可以相信，这个工具不会让你失望，你也可以单独使用它制作自己的网页。
+
+ * 创建者：Mark Otto and Jacob Thornton
+ * 发布：2011
+ * 当前版本：3.3.1
+ * 流行度：75,000 stars on GitHub
+ * 描述：“Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.”
+ * 核心概念/原理：RWD和 移动优先
+ * 框架大小：145 KB
+ * 预处理器：Less and Sass
+ * 响应式：Yes
+ * 模块化：Yes
+ * 起始模版/轮廓：Yes
+ * 图标集：Glyphicons
+ * 其他插件：无绑定，有其他三方插件
+ * 独特组件：Jumbotron
+ * 文档：Good
+ * 定制：基本 GUI 定制，不过需要手动修改,因为无颜色选取工具。
+ * 浏览器支持： Firefox、Chrome、Safari、IE8（IE8需要 Respond.js）
+ * 授权： MIT
+
+2.**Foundation by ZURB**
+
+
+
+>与Bootstrap相比，Foundation屈居第二，不过这并不能说明它不受欢迎。 ZURB在后面强有力的支持，使得 Foundation 更加强大！Foundation被各大网站使用，如Facebook、Mozilla、Ebay、 Yahoo、美国国家地理网站等等。
+
+ * 发布：2011
+ * 创建者：ZURB
+ * 当前版本：5.4.7
+ * 流行度：18,000 stars on GitHub
+ * 描述： “The most advanced responsive front-end framework in the world”
+ * 核心概念/原理：RWD、Mobile First、Semantic
+ * 框架大小：326 KB
+ * 预处理器： Sass
+ * 响应式： Yes
+ * 模块化： Yes
+ * 启始模版/布局： Yes
+ * 图标集：Foundation Icon Fonts
+ * 其他组件：Yes
+ * 独特组件：Icon Bar、 Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables
+ * 文档：Good。有许多资源可参考。
+ * 定制： 无GUI 定制，但可自己写。
+ * 浏览器支持： Chrome、Firefox、Safari、IE9、 iOS、Android、Windows Phone 7
+ * 授权：MIT
+ * 与众不同：对于商务运输、教育培训、咨询等行业来说，Foundation是一个专业框架。它还提供很多资源让你快速学习。
+
+3.**Semantic UI**
+
+
+>Semantic UI正在不懈努力让网页制作变得更加Semantic。原生语言规则让代码更易读易懂。
+
+ * 创建者：Jack Lukic
+ * 发布：2013
+ * 当前版本：1.2.0
+ * 流行度：12,900 stars on GitHub
+ * 描述： “A UI component framework based around useful principles from natural language.”
+ * 核心概念/原理： Semantic、Tag Ambivalence、Responsive
+ * 框架大小：552 KB
+ * 预处理器：Less
+ * 响应式：Yes
+ * 模块化：Yes
+ * 启始模版/布局：No
+ * 图标集：Font Awesome
+ * 其他组件：No
+ * 独特组件：Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、 Statistic、Dimmer、Rating、Shape
+ * 文档： 非常完善。Semantic 提供多个结构层次的文档，单独网站提供给初学者以及其它定制教程等。
+ * 定制：无GUI 定制，但可自己写。
+ * 与众不同：Semantic可以说今天所讨论的框架中是最创新、功能最全面的框架。整体构架、命名规则，有清晰 的逻辑、语义性，超过其它框架。
\ No newline at end of file
diff --git a/Exercise/cs02-imooc/blog-header.md b/Exercise/cs02-imooc/blog-header.md
new file mode 100644
index 0000000..5416ffc
--- /dev/null
+++ b/Exercise/cs02-imooc/blog-header.md
@@ -0,0 +1,111 @@
+## 9/15/2015 8:12:38 PM IMOOC首页构建 ##
+
+###创建header导航###
+>通过本小节的学习，掌握网站logo的常用技巧，深入掌握：
+>display,overflow,white-space,text-indent的用法
+
+先来看效果图
+
+观察可知，导航可由四个部分构成（课程logo，导航菜单条，搜索工具栏，登录窗口）
+由此可以实现相关的HTML代码结构，具体如下：
+```HTML
+ +Building intro blocks
+ ++效果图
+ +
+构建HTML结构
+ + <div class="intros">
+ <div class="intro bg-grey ">
+ <div class="idx-width intro1-wrap">
+ <div class="intro1-star"></div>
+ <div class="intro1-video"></div>
+ <div class="intro1-text hidden-text">精心制作的视频课程。老师都技术大牛实战派。课程内容接地气，实际工作用得着。</div>
+ </div>
+ </div>
+ ……
+ </div>注意：intro特性介绍分成四个部分，每个部分交叉的显示灰色/白色背景，文字图背景位置交叉地以右侧/左侧的形式进行定位。制作方法类似，这里仅以第一个特性介绍为例，它由星星（Star），视频（Video）和右侧文字三个部分构成，因此，在构建HTML结构时放置了三个div区域。外层的idx-width用于控制整个外盒的尺寸和居中显示效果。bg-grey显示背景色效果。
+ ++构建相应CSS
+ +.hidden-text{
+ text-indent: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.bg-grey{
+ background-color: #eef1f2;
+}
+.bg-white{
+ background-color: #fff;
+}
+.intro1-wrap{
+ height: 400px;
+ position: relative;
+}
+.intro1-star{
+ position: absolute;
+ left: -15px;
+ top: -20px;
+ background: url("../images/01-star.png") no-repeat top left;
+ width: 581px;
+ height: 431px;
+ z-index: 10;
+}
+.intro1-video{
+ position: absolute;
+ width: 581px;
+ height: 431px;
+ background: url("../images/01-video.png") 0 0 no-repeat;
+ left: -15px;
+ bottom: 0px;
+ z-index: 5;
+}
+.intro1-text{
+ position: absolute;
+ width: 493px;
+ height: 70px;
+ right: 105px;
+ top: 164px;
+ background: url("../images/01-text.png") 0 0 no-repeat;
+}整个背景采用纯灰色和白色交替形式，为方便，将灰色和白色背景分别定义bg-grey和bg-white类，有了他们，在需要相应背景的元素开始标签添加相应的类样式进行叠加即可。为便于搜索引擎搜索，元素提供了图片文字对应的文字版本，但这些文字不需要用户看到，这里使用.hidden-text样式来隐藏这些图片文字。
+intro2~4的实现方式与此类似，在此不再赘述，下面给出完整CSS代码
.intro2-wrap{
+ height: 400px;
+ position: relative;
+}
+.intro2-text{
+ width: 512px;
+ height: 70px;
+ position: absolute;
+ left: 105px;
+ top: 165px;
+ background: url("../images/02-text.png") 0 0 no-repeat;
+}
+.intro2-computer{
+ background: url("../images/02-computer2.png") 0 0 no-repeat;
+ position: absolute;
+ top: -30px;
+ width: 580px;
+ height: 430px;
+ right: 0;
+}
+
+.intro3-wrap{
+ height: 400px;
+ position: relative;
+}
+.intro3-calendar{
+ background: url("../images/03-calendar.png") 0 0 no-repeat;
+ position: absolute;
+ left: 0px;
+ top:-31px;
+ width: 581px;
+ height: 431px;
+ z-index: 1;
+}
+.intro3-text{
+ position: absolute;
+ right:165px ;
+ width: 476px;
+ height: 70px;
+ top: 165px;
+ background: url("../images/03-text.png") 0 0 no-repeat;
+}
+.intro3-smoke{
+ background: url("../images/03-smoke.png") 0 0 no-repeat;
+ position: absolute;
+ left: 0px;
+ top: -31px;
+ width: 581px;
+ height: 431px;
+ z-index:2 ;
+}
+.intro3-rockets{
+ background: url("../images/03-rockets.png") 0 0 no-repeat;
+ position: absolute;
+ left: 0px;
+ top: -46px;
+ width: 581px;
+ height: 431px;
+ z-index:3 ;
+}
+
+.intro4-wrap{
+ height: 400px;
+ position: relative;
+}
+.intro4-text{
+ background: url("../images/04-text.png") 0 0 no-repeat;
+ height: 70px;
+ width: 422px;
+ position: absolute;
+ left: 146px;
+ top: 165px;
+ z-index: 1;
+}
+.intro4-hand{
+ background: url("../images/04-hand.png") 0 0 no-repeat;
+ height: 430px;
+ width: 581px;
+ right: 0;
+ top: -30px;
+ position: absolute;
+ z-index: 5;
+}
+.intro4-icon{
+ background: url("../images/04-icon.png") 0 0 no-repeat;
+ height: 430px;
+ width: 581px;
+ right: 0;
+ top: -30px;
+ position: absolute;
+ z-index: 10;
+}