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......```
74、 Make Images Mobile Responsive
``` 用bootstrap的img属性添加一个图片```
75、 Center Text with Bootstrap
``` 添加一个bootstrap的文本(class="red-text text-center"的样式是红色文本,水平居中)CatPhotoApp
```
76、 Create a Bootstrap Button
``` 添加一个bootstrap的按钮 ```
77、 Create a Block Element Bootstrap Button
``` 将button改成级块元素大小 ```
78 、Taste the Bootstrap Button Color Rainbow
``` 修改button的颜色,(改成蓝色,蓝色是原始颜色,表示一个成功的或积极的动作,可参考www.runoob.com) ```
79、 Call out Optional Actions with Button Info
``` 添加浅蓝色button按钮(浅蓝色在bootstrap里表示应谨慎采取的动作) ```
80、 Warn your Users of a Dangerous Action
``` 添加一个button红色按钮(红色在bootstrap里表示一个危险的或潜在的负面动作) ```
81、 Use the Bootstrap Grid to Put Elements Side By Side
``` bootstrap的网格布局,网格布局先要把所需要的元素放到一个大的div里面,然后添加div的class="row",有点像弹性布局的意思,这里介绍了col-xs-4,意思是占据宽度的三分之一```
82、 Ditch Custom CSS for Bootstrap
``` 清理代码(这节改动的地方很多,代码就不贴了,主要是用bootstrap改变一下原来的样式) ```
83、 Use Spans for Inline Elements
```
行内元素,就是如果你在或
元素中要修改一下内容的字体样式,就用到span
Things cats love:
```
84、 Create a Custom Heading
``` 创建一个bootstrap的导航```CatPhotoApp
85、 Add Font Awesome Icons to our Buttons
```
为按钮添加font awesome图标,(font awesome的中文网址:http://fontawesome.dashgame.com/)用i元素
```
86、 Add Font Awesome Icons to all of our Buttons
```
为其他两个按钮加font awesome元素
```
87、 Responsively Style Radio Buttons
```
从新布置单选按钮,用col-xs-6(原因:因为只有两个单选按钮,这样的话用12格的网格分配,每个按钮各占一半就是col-xs-6了)
```
88、 Responsively Style Checkboxes
```
从新布置复选按钮,因为复选按钮有3个,所以用col-xs-4
```
89、 Style Text Inputs as Form Controls
```
为文本输入框和提交按钮增加图标和样式
这节中form-control不太懂具体的意思,看样子是占满横向宽度,更圆滑一些了.
```
90、 Line up Form Elements Responsively with Bootstrap
``` 用bootstrap网格将文本输入框和按钮放在一行内```