发表于: 2019-01-13 23:34:57
1 789
今天完成:
1、 了解了input等属性
2、 开始做任务十
明天计划:
1、 修改任务七并提交
2、 继续完成任务十
遇到的问题:
1、 引入bootstrap的Container的列不能流动
原因,设置了固定宽高。解决,去掉固定高度,用内部元素撑起
2、 如何替换input[type=”radio”]的样式
解决:原理思路:隐藏input标签,利用label标签/图片替换input标签的位置,input最好应当覆盖住替换的样式,以便监听选中事件。
收获:
1、 修改radio默认样式步骤
(1) 隐藏原有input样式opacity:0或display:none
(2) Label设置display:inline-block属性,方便定位不挤占空间
(3) 通过相邻同胞选择器监听radio选中事件,修改label样式
input:checked+label { 相邻同胞选择器,选择被选中的input标签后 第一个label标签[input 和 label标签有共同的父元素];
在替换select标签样式思路差不多,只是替代的时图片,为了让图片将单击事件传递给select标签,需要使用pointer-events:none;
2、 pointer-events
auto:与pointer-events属性未指定时的表现效果相同。
none:元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
3、:after 选择器在被选元素的内容后面插入内容。
比如代码:
.example:after {
content: "";
display: block;
width: 100px;
height: 100px;
}
content属性值可以为空,并且仅仅把他当做一个内容很少的盒
但不可以完全的移除content属性,如果移除了,伪元素将不会起作用。至少,content属性需要空引用作为它的值(即:content:“”)。
4、jQuery 效果 - hide() 方法
参数 | 描述 |
speed | 可选。规定元素从可见到隐藏的速度。默认为 "0"。 可能的值: · 毫秒 (比如 1500) · "slow" · "normal" · "fast" 在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、 外边距、内边距和透明度。 |
callback | 可选。hide 函数执行完之后,要执行的函数。 除非设置了 speed 参数,否则不能设置该参数。 |
5、隐藏select的下拉图标时,使用了 appearance: none;
appearance 属性使元素看上去像标准的用户界面元素。
值 | 描述 |
normal | 将元素呈现为常规元素。 |
icon | 将元素呈现为图标(小图片)。 |
window | 将元素呈现为视口。 |
button | 将元素呈现为按钮。 |
menu | 将元素呈现为一套供用户选择的选项。 |
field | 将元素呈现为输入字段。 |
评论