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;