FreeCodeCamp备查簿(2:#31-#60)

20170809

#31 Create a Bulleted Unordered List
创建无序列表，这个是html用处很多的元素之一。
<ul>
  <li>猫喜欢的事情1</li>
  <li>猫喜欢的事情2</li>
  <li>猫喜欢的事情3</li>
</ul>


#32 Create an Ordered List
创建有序列表<ol>的应用,不管是ol还是ul里面的列表项都是li元素
<ol>
  <li>猫痛恨的事情1</li>
  <li>猫痛恨的事情2</li>
  <li>猫痛恨的事情3</li>
</ol>


#33 Create a Text Field
创建一个类型为文本的表单,表单的应用很重要,很多发送到服务器端的事件都是由表单完成的,注意,input是自关闭的,
所以后面不用</input>结尾
<input type="text">


##34 Add Placeholder Text to a Text Field
添加一个文本的占位符,也就是说在表单里,加入一个在你没输入任何字符前的一个说明,比如在填写用户名之前,灰色字体提示"请输入用户名"
<input type="text" placeholder="cat photo URL">


#35 Create a Form Element
创建一个form表单,与服务器交互的元素.<Form></Form>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>


#36 Add a Submit Button to a Form
添加一个提交按钮:Submit,我们经常遇到的元素,注册,申请之类的按钮都是submit,只要在form里面,加入button 类型是submit就可以
<button type="submit">submit</button>


##37 Use HTML5 to Require a Field
用html5设置输入框为必填项,这个非常有用,制作注册页面时用得上.只要在输入框的类型后面直接写上required就可以了
<input type="text" required placeholder="cat photo URL">


##38 Create a Set of Radio Buttons
创建一个单选按钮,Radio Button,选择题的时候用得上,注:单选按钮只是input输入框的一种类型。
其实就是把input的类型由34节的type="text"改成type="radio",这里需要注意:每个单选按钮都要嵌套在<label>
标签里,而且一组单选按钮他们的name都应该是一样的,否则不会出现单选效果
 <label>
   <input type="radio" name="indoor-outdoor">indoor
   </label>
   <label>
  <input type="radio" name="indoor-outdoor">outdoor
  </label>


  ##39 Create a Set of Checkboxes
  创建复选按钮checkboxes,复选框也是input的一种类型,每个都要包含在label标签里,他们的name都应该一样
<label><input type="checkbox" name="personality"> Indoor</label>
  <label><input type="checkbox" name="personality"> Indoor</label>
  <label><input type="checkbox" name="personality"> Indoor</label>


#40 Check Radio Buttons and Checkboxes by Default
单选和复选默认被选中,checked,加入这个就是默认状态
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>

#20170809


#41 Nest Many Elements within a Single Div Element
<div>元素,FreeCodeCamp中文社区的解释是division(层)元素,个人理解就是把想要调整样式的东西先用div包起来,然后
修改div和div里面的元素的样式来达到目的,突然感觉好像微信小程序里面的<View>
<div>
  <p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
</div>


#42 Give a Background Color to a Div Element
用background设置背景色,不解释了
1)在<style>中加入
.gray-background {
  background-color: gray;
}
2)在div中加入:
<div class="gray-background">


#43 Set the ID of an Element
使用id属性,style;class;id都是设置样式的,类似于:"一年级学生,一年一班学生,一年一班小明"
<form id="cat-photo-form" action="/submit-cat-photo">


#44 Use an ID Attribute to Style an Element
用id 选择器声明样式 :在style中用#表示id选择器,"."表示用class选择器
1)在style中:
 #cat-photo-form{
    background-color:green;
  }
2)在form中:
<form action="/submit-cat-photo" id="cat-photo-form">


#45 Adjusting the Padding of an Element
调整padding(内边距)
 .green-box {
    background-color: green;
    padding: 20px;
  }
  
#46 Adjust the Margin of an Element
调整外边距,这段时间我总是把内边距和外边距搞混,应该是熟练程度问题.
.green-box {
    background-color: green;
    padding: 20px;
    margin: 20px;
  }


#47 Add a Negative Margin to an Element 
  添加负值的外边距,这节虽然要求的很简单,但是道理不太容易弄明白,为什么调成-15px就能占满黄色呢?我试过-1;-10;-12;-17;-20,还真是只有-15才行.
   .green-box {
    background-color: green;
    padding: 20px;
    margin: -15px;
  }
  
##48 Add Different Padding to Each Side of an Element
设置不同的padding,需要记住的是顺序,从上开始:上右下左,顺时针,这个不要搞错了.
.green-box {
    background-color: green;
     padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }
  
#49 Add Different Margins to Each Side of an Element
设置不同的margins,跟padding一样,不多解释了
  .green-box {
    background-color: green;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
  }
  
  #50 Use Clockwise Notation to Specify the Padding of an Element
  用集中方式指定padding
    .green-box {
    background-color: green;
    padding: 40px 20px 20px 40px;
  }
 
 #20170810
 
  #51 Use Clockwise Notation to Specify the Margin of an Element 
  用集中方式制定margin
    .green-box {
    background-color: green;
    margin:40px 20px 20px 40px;
  }
  
#52 Style the HTML Body Element
讲解style元素的原理,简单
<style>
  body {
    background-color:black;
  }
</style>


#53 Inherit Styles from the Body Element
添加一个h1元素,继承body属性
<style>
  body {
    background-color: black;
    color:green;
    font-family:Monospace; 
  }
</style>
<h1>Hello World</h1>


#54 Prioritize One Style Over Another 
调用class属性会覆盖继承的属性,如果class为粉色,继承body的属性为绿色,则元素为粉色.
  .pink-text{
    color:pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>


#55 Override Styles in Subsequent CSS
覆盖样式的规则,如果一个元素有多个class样式,如果属性类别也一样,那么第二个class会覆盖前一个class,比如两个class定义的属性都是color,那么第二个class会覆盖第一个class.如下面代码,生效的是蓝色
  .pink-text {
    color: pink;
  }
   .blue-text {
    color: blue;
  }
</style>
<h1 class="pink-text blue-text">Hello World!</h1>


#56 Override Class Declarations by Styling ID Attributes
id属性覆盖class属性 样式属性级别:内嵌样式>id>class>前一个class>元素定义>继承上一级元素(个人理解,如果观点错了,希望有大牛批评指正)
  #orange-text{
    color:orange;
  }
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>

#57 Override Class Declarations with Inline Styles
内嵌样式.级别高于其他
<h1 id="orange-text" class="pink-text blue-text" style="color:green">Hello World!</h1>


#58 Override All Other Styles by using Important
important声明样式,就是说在代码里声明,这个是级别最高的.
 .pink-text {
    color: pink !important;
  }


#59 Use Hex Code for Specific Colors
用十六进制定义颜色,#123456
    background-color: #000000;
    
#60 Use Hex Code to Color Elements White
十六进制的白色,以后的几节都是讲解十六进制的基本颜色,这个记不住也没关系,以后用的多自然就记住了.虽然十六进制的颜色有1600万之多,不过常用的也就十几种.
   background-color: #FFFFFF;