freeCodeCamp第一天

<input type="text" placeholder="我看见你了">

<form action="/url-where-you-want-to-submit-form-data"></form>
<button type="submit">this button submits the form</button>
<input type="text" placeholder="我看见你了" required>

单选按钮自只是input输入框的一种类型，每一个单选按钮都应该嵌套自己的label元素中，所有关联的单选按钮都应该使用相同的name属性

<label><input type="radio" name="indoor-outdoor">Indoor</label>

复选按钮是input的输入框的另一种类型。

每一个复选按钮都应该嵌套进label元素中。

所有关联的复选按钮应该具有相同的name属性。

下面是复选按钮的例子：

<label><input type="checkbox" name="personality" checked> Loving</label>

checked默认选中

div也称作division（层）元素，是一个盛装其他元素的通用容器

类选择器

.green background{
background-color:green;
}

id选择器

    <a id="id"></a>
    #id{
    样式;
    }

padding（内边距）、margin（外边距）、border（边框）

<style>
  .injected-text {
margin-bottom: -25px;
text-align: center;
  }

  .box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
  }

  .yellow-box {
background-color: yellow;
padding: 10px;
  }

  .red-box {
background-color: red;
padding: 20px;
  }

  .green-box {
background-color: green;
padding: 20px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>

!important大于行内选择器大于id选择器优先级大于类选择器

#FFFFFF    WHITE   最大亮度
#FF0000    RED
#00FF00    GREEN
#0000FF    BLUE
#000000    BLACK
rgb(0,0,0) white
rgb(255,255,255)  black
rgb(255,0,0)   red
rgb(0,255,0)   green
rgb(0,0,255)   blue

bootstrap

bootstrap响应式设计,将内容放在class为container-fluid的div下

    <link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">    

h2元素居中显示

<h2 class="text-center"></h2>

按钮
行内元素

<button class="btn"></button>

块级元素

深蓝色块级，需要btn和btn-block属性

浅蓝色块级，需要btn btn-block btn-info属性

<button class="btn btn-block btn-info"></button>

红色块级

<button class="btn btn-block btn-danger"></button>

三个按钮放在同一列
所有按钮先要放在一个class带有row的div标签中，每个按钮需要被

的元素包裹

深蓝色居中文字<h2 class="text-primary text-center"></h2>

为图片加上img-responsive属性，不知什么用

<img src="/images/running-cat.jpg" class="img-responsive">

12栏栅格布局要放在包含有row属性的div容器里
col-md-*中的md代表中等
col-xd-*中的xd代表小屏幕

Font Awesome

Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
在HTML头部增加以下代码：

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

叹号图标

<i class="fa fa-info-circle">hao</i>

点赞图标

<i class="fa fa-thumbs-up">hao</i>
<i class="fa fa-thumbs-down">倒的大拇指

垃圾图标

<i class="fa fa-trash"></i>

纸飞机图标

<i class="fa fa-paper-plane"></i>

修饰文本框

<input type="text" class="form-control" placeholder="cat photo URL" requeired>

视觉上的深度感

<div class="well">asdf</div>