FreeCodeCamp备查簿(3:#61-#90)

free code camp应该是我接触到的最能提高个人能力的学习路径了,像它的广告语"Free Code Camp 已经被证明是获取编程工作的最有效路径，事实上，没人完成了所有课程，因为他们都在完成之前就找到了工作。"不过有一点我不太赞同,就是学习过程中,越往后的章节进度会越慢,因为它要求的是你的动手能力,而不是走马观花.所以在这里学习的童鞋不会有学完后什么都不会做的现象.不过我的博客可能不会每天更新30节了,以后的日程我尽自己努力每天更新10节.

  20170812
#61 Use Hex Code to Color Elements Red
16进制红色
  body {
    background-color: #FF0000;
  }


#62 Use Hex Code to Color Elements Green
16进制绿色
  body {
    background-color: #00FF00;
  }


#63 Use Hex Code to Color Elements Blue
16进制蓝色,(我不太理解为什么16进制颜色要做好几节课,有这个必要吗)
  body {
    background-color: #0000FF;
  }


 #64 Use Hex Code to Mix Colors
 16进制橙色,主要的目的是了解16进制颜色的编码.
   body {
    background-color: #FFA500;
  }


#65 Use Hex Code to Color Elements Gray
16进制灰色
  body {
    background-color: #808080;
  }


#66 Use Hex Code for Specific Shades of Gray
16进制深灰色
  body {
    background-color: #111111;
  }


#67 Use Abbreviated Hex Code
简写16进制红色
  body {
    background-color: #F00;
  }


#67 Use RGB values to Color Elements 
rgb的黑色
  body {
    background-color: rgb(0,0,0);
  }


#68 Use RGB to Color Elements White
rgb的白色
  body {
    background-color: rgb(255, 255,255);
  }


#69 Use RGB to Color Elements Red
rgb的红色
  body {
    background-color: rgb(255, 0, 0);
  }


#70 Use RGB to Color Elements Green
rgb的绿色
  body {
    background-color: rgb(0, 255, 0);
  }


#71 Use RGB to Color Elements Blue
rgb的蓝色
  body {
    background-color: rgb(0, 0, 255);
  }


#72 Use RGB to Mix Colors
rgb的橙色,(这篇内容其实很简单的,照着做就ok了,我只不过为了内容全面,把这些课程也都贴了出来.)
  body {
    background-color: rgb(255, 165, 0);
  }
#73 Use Responsive Design with Bootstrap Fluid Containers
bootstrap框架,先做一个整个页面的div,div的class是container-fluid
<div class="container-fluid">
......
</div>


#74 Make Images Mobile Responsive
用bootstrap的img属性添加一个图片
<img class="img-responsive" src="/images/running-cat.jpg">


#75 Center Text with Bootstrap
添加一个bootstrap的文本(class="red-text text-center"的样式是红色文本,水平居中)
<h2 class="red-text text-center" >CatPhotoApp</h2>

#76 Create a Bootstrap Button
添加一个bootstrap的按钮
 <button class="btn">Like</button>


#77 Create a Block Element Bootstrap Button
将button改成级块元素大小
  <button class="btn btn-block">Like</button>


#78 Taste the Bootstrap Button Color Rainbow
修改button的颜色,(改成蓝色,蓝色是原始颜色,表示一个成功的或积极的动作,可参考www.runoob.com)
 <button class="btn btn-primary btn-block">Like</button>


#79 Call out Optional Actions with Button Info
添加浅蓝色button按钮(浅蓝色在bootstrap里表示应谨慎采取的动作)
 <button type="text" class="btn btn-block btn-info">Info</button>


#80 Warn your Users of a Dangerous Action 
添加一个button红色按钮(红色在bootstrap里表示一个危险的或潜在的负面动作)
   <button class="btn btn-danger btn-block">Delete</button>


#81 Use the Bootstrap Grid to Put Elements Side By Side
bootstrap的网格布局,网格布局先要把所需要的元素放到一个大的div里面,然后添加div的class="row",有点像弹性布局的意思,这里介绍了col-xs-4,意思是占据宽度的三分之一
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>


#82 Ditch Custom CSS for Bootstrap
清理代码(这节改动的地方很多,代码就不贴了,主要是用bootstrap改变一下原来的样式)


#83 Use Spans for Inline Elements
<span>行内元素,就是如果你在<p>或<h2>元素中要修改一下内容的字体样式,就用到span
  <p>Things cats <span class="text-danger">love:</span></p>


#84 Create a Custom Heading
创建一个bootstrap的导航
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a>
    </div>
  </div>


#85 Add Font Awesome Icons to our Buttons
为按钮添加font awesome图标,(font awesome的中文网址:http://fontawesome.dashgame.com/)用i元素
      <button class="btn btn-block btn-primary"><i class="fa 
      fa-thumbs-up">Like</i></button>


#86 Add Font Awesome Icons to all of our Buttons  
为其他两个按钮加font awesome元素
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>
    </div>


#87 Responsively Style Radio Buttons
从新布置单选按钮,用col-xs-6(原因:因为只有两个单选按钮,这样的话用12格的网格分配,每个按钮各占一半就是col-xs-6了)
    <div class="row">
      <div class="col-xs-6"> 
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6"> 
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>


#88 Responsively Style Checkboxes
从新布置复选按钮,因为复选按钮有3个,所以用col-xs-4
      <div class="row">
        <div class="col-xs-4">  
          <label><input type="checkbox" name="personality"> Loving</label>
        </div>
        <div class="col-xs-4">  
          <label><input type="checkbox" name="personality"> Lazy</label>
        </div>
        <div class="col-xs-4">  
          <label><input type="checkbox" name="personality"> Crazy</label>
        </div>
      </div>


#89 Style Text Inputs as Form Controls
为文本输入框和提交按钮增加图标和样式
这节中form-control不太懂具体的意思,看样子是占满横向宽度,更圆滑一些了.
    <input type="text" class="form-control" placeholder="cat photo URL" required>
    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>


#90 Line up Form Elements Responsively with Bootstrap
用bootstrap网格将文本输入框和按钮放在一行内
  <div class="row">
    <div class="col-xs-7">
      <input type="text" class="form-control " placeholder="cat photo URL" required>
    </div>
    <div class="col-xs-5">
      <button type="submit" class="btn btn-primary col-xs-5"><i class="fa fa-paper-plane"></i> Submit</button>
    </div>
  </div>