发表于: 2018-07-07 22:19:21
1 743
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 定义复选框
评论