发表于: 2018-06-29 22:24:30
1 643
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
开始任务10
首先学习了css模拟html checkbox的功能。
纯css实现的主要手段是利用label标签的模拟功能。
label的for属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应的label后,用户可以直接通过和label标签交互来替代原生的input。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
简而言之就是
隐藏原生input,通过input的id,关联对应label标签,然后对label标签进行样式定义
这里使用了相邻兄弟选择器。
通过+号可以选择紧接在另一个元素后的元素,而且二者有相同的父元素。这里的checked并不是对label元素生效,而label通过id关联到相应的input元素,通过input元素的checked显示相应的效果。
也就是input触发checked的时候。label的before伪元素改变背景颜色。
- -但是这种方式会导致
而我们需要的是一个单选框。
....搞了半天发现是因为没有对input设置name类型。。。
对所有的input设置相同的name值就可以实现单选了。
什么是伪元素?
before、after伪元素指定了一个dom元素文档树之前或者之后的内容。
content属性是用来放置我们需要输入的内容。
而且在使用伪元素的时候,必须制定伪元素的content属性,即使为空,也要写成content:"";
根据理解:
一个dom元素文档树之前或者之后的内容,指的就是这个元素是可以盛放别的元素,或者内容。
作为dom元素,伪元素的渲染都是在容器元素中进行的,像select,input,textarea,里面并不能放置其他的元素。所以它们不支持伪元素。
以下是浏览器的支持情况。
IE 不支持的元素有:img,input,select,textarea。
FireFox 不支持的元素有:input,select,textarea。
Chrome 不支持的元素有:input[type=text],textarea。
因为浏览器的兼容问题,最好不要对表单元素使用伪元素,如果想使用伪元素的话,在表单元素外边套一个容器div。
明天计划的事情:(一定要写非常细致的内容)
请假
遇到的问题:(遇到什么困难,怎么解决的)
布局结构
收获:(通过今天的学习,学到了什么知识)
对布局结构的熟悉程度的加深
评论