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>