2018.7.7

今天完成的事情:

1.完成任务九的媒体查询

2.完成任务十的修改

3.开始任务十一

4.学习sass

明天计划的事情:

1.完成sass的初步认识

2.完成任务十一

遇到的问题:

收获:

1.初步认识了sass

1.1使用变量，变量的声明使用$符号来表示变量

一个变量中是可以引用另一个变量的

1.2嵌套css规则

举个例子

#content {

  article {

    h1 { color: #333 }

    p { margin-bottom: 1.4em }

  }

  #content aside { background-color: #EEE }

}

这种编译后就是

#content article h1 { color: #333 }

#content article p { margin-bottom: 1.4em }

#content aside { background-color: #EEE }

这种感觉和css中的后代选择器一样 通过一个空格连接子元素

1.2.1父选择器的标识符& 这个不会有空格会直接替换&符号

1.2.2群组选择器

1.2.3子组合选择器和同层选择器 >和+，~

这三个选择器要和其他选择器配合使用

>这个是选择紧跟父元素的第一个子元素

+同层相邻紧跟元素

~同层所有元素

1.3导入sass文件

@import

！default 如果没有赋值则采用这个值，和css中的！important是相反的属性

1.4静默注释

//。。。。。编译后的css文件中不会有这个内容

/*。。。。。*/会有

暂时就看了这些部分，有点感觉像之前学类选择器的时候，“公共类”的思路，使用公共类就是提供“公共服务”

2.任务十任务总结

任务名称：CSS=TASK10

成果链接：https://helloimyhe.github.io/web/css10/task10.html

任务耗时：2018.7.7-2018.7.7（1）

技能脑图：

官网脑图：

自己脑图：

任务总结：

任务十主要还是使用了bootstrap的框架，label和input的配合使用

radio和checkbox的使用

<label> 标签

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

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

<label> 标签的 for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

<input> 标签

标签定义及使用说明

<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。

提示和注释

注意: <input> 元素是空的,它只包含标签属性。使用 <label> 元素来定义 <input> 元素的标注。

input标签常用的样式

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

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

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

field_name 定义 input 元素的名称。

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

password 定义密码

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

checkbox 定义复选框