发表于: 2019-04-20 22:56:42
1 370
今天完成的事:大体完成了任务10的页面
遇到的问题:1flex图片的字体对齐
今天有个师兄在做任务8的时候图片就是对齐不了
然后用了flex
baseline
: 项目的第一行文字的基线对齐。
2.Hover效果
在做任务10的时候需要Hover
本来我想给它父级元素hover
实现不了只能一个一个Hover
3.修改了代码的命名
很多时候需要语义化命名,需要多多注意。
4.input
对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现。
如果直接对单选按钮设置样式,那么这个伪类并不实用,因为没有多少样式能够对单选按钮起作用。不过,倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。
很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后,也可以起到触发开关的作用。
思路:
1. 可以为<label>元素添加生成性内容(伪元素),并基于单选按钮的状态来为其设置样式;
2. 然后把真正的单选按钮隐藏起来;
3. 最后把生成内容美化一下。
解决方法:
1. 一段简单的结构代码:
<div class="female"> <input type="radio" id="female" name="sex" /> <label for="female">女</label></div><div class="male"> <input type="radio" id="male" name="sex" /> <label for="male">男</label></div>
2. 生成一个伪元素,作为美化版的单选按钮,先给伪元素添加一些样式:
input[type="radio"] + label::before { content: "\a0"; /*不换行空格*/ display: inline-block; vertical-align: middle; font-size: 18px; width: 1em; height: 1em; margin-right: .4em; border-radius: 50%; border: 1px solid #01cd78; text-indent: .15em; line-height: 1; }
现在的样子:
原来的单选按钮仍然可见,但是我们先给单选按钮的勾选状态添加样式:
3. 给单选按钮的勾选状态添加不同的样式:
input[type="radio"]:checked + label::before { background-color: #01cd78; background-clip: content-box; padding: .2em; }
现在的样子:
4. 现在把原来的单选按钮隐藏:
input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); }
现在的样子:
隐藏原来的单选按钮时,如果使用 display: none; 的话,那样会把它从键盘 tab 键切换焦点的队列中完全删除。
于是可采用剪切的方式,让剪切后的尺寸为零,这样就隐藏了原来的单选按钮。
知道怎么用了 但是里面有很多东西还是没吃透。
比如
还有为什么要用绝对定位? 明天再看一下
5.
HTML <select> 标签
<select> 元素用来创建下拉列表。
select> 元素中的 <option> 标签定义了列表中的可用选项。
提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。
属性 | 值 | 描述 |
---|---|---|
autofocusNew | autofocus | 规定在页面加载时下拉列表自动获得焦点。 |
disabled | disabled | 当该属性为 true 时,会禁用下拉列表。 |
formNew | form_id | 定义 select 字段所属的一个或多个表单。 |
multiple | multiple | 当该属性为 true 时,可选择多个选项。 |
name | name | 定义下拉列表的名称。 |
requiredNew | required | 规定用户在提交表单前必须选择一个下拉列表中的选项。 |
size | number | 规定下拉列表中可见选项的数目。 |
好几个属性没用到 要尝试一下
6.栅格布局 lg md sm col 每一个对应的px
.container 最大宽度 | None (auto) | 540px | 720px | 960px | 1140px |
---|---|---|---|---|---|
类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
在做任务中用到了媒体查询需要
现在对什么时候用max-width
和什么时候用min-widch
还有点懵
明天的事: 1.搞懂什么时候用max什么时候用Min
2.input{type=radio 在看一下}
3.再学习一下语义化命名 和代码规范
4.完成任务10
评论