明天计划的事：完成任务11-12

遇到的问题：

mixin的强大之处，在于可以指定参数和缺省值 不是太能理解

解决办法：

mixin的强大之处，在于可以指定参数和缺省值。

　　@mixin left($value: 10px) {

　　　　float: left;

　　　　margin-right: $value;

　　}

使用的时候，根据需要加入参数：

　　div {

　　　　@include left(20px);

　　}

下面是一个mixin的实例，用来生成浏览器前缀。

　　@mixin rounded($vert, $horz, $radius: 10px) {

　　　　border-#{$vert}-#{$horz}-radius: $radius;

　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;

　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;

　　}

使用的时候，可以像下面这样调用：

　　#navbar li { @include rounded(top, left); }

　　#footer { @include rounded(top, left, 5px); }

收获：

可以运用了sass部分的知识 

继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

　　.class1 {

　　　　border: 1px solid #ddd;

　　}

class2要继承class1，就要使用@extend命令：

　　.class2 {

　　　　@extend .class1;

　　　　font-size:120%;

　　}

4.2 Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。

　　@mixin left {

　　　　float: left;

　　　　margin-left: 10px;

　　}

使用@include命令，调用这个mixin。

　　div {

　　　　@include left;

　　}

自己的脑图：

任务总结：

<label> 标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<input> 标签

<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<input>没有结束标签。

text           定义图像输入的替代文本。规定帮助用户填写输入字段的提示。

checked         规定此 input 元素首次加载时应当被选中。用于多选框按钮

number          规定输入字段中的字符的最大长度。

field_name       定义 input 元素的名称。

button          定义按钮，现在利用button标签实现

password         定义密码

radio           定义多选按钮

checkbox         定义复选框

radio定义多选按钮，利用label标签链接，点击文字触发复选按钮

onkeyup="value=value.replace(/[^\d]/g,'')"定义只能输入数字
maxlength="5"   定义最大只能输入五个数字

placeholder="请输入数字" 定义输入框的提示文字