[北京|结业弟子]JS-朱春雨|2019年11月30日的日报-技能树.IT修真院

发表于： 2019-11-30 22:11:25

1 985

今天完成的事情：

task10脑图

clip 属性用来设置元素的形状。用来剪裁绝对定位元素。

上 右  下 左

clip:rect(0px,0px,0px,0px);

这是原图 如果想要达到下图的效果怎么做？

这个图是500px × 500px

rect(100px,350px,300px,150px) 意思是上裁剪100px  右裁剪150px  下裁剪200ox 左裁剪150px

很好理解只能用于绝对定位和固定定位会用就好

更改原生按钮

用的display：none；

label 相对定位 中间的小点伪元素 绝对定位

然后用checked触发点击 就好了

下面试试裁剪

没裁剪 没隐藏  

裁剪只需要加个绝对定位就好了   效果一样  并不复杂 理解之后就好了

下面试试更改下拉框

效果

这个实现比较简单

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;    上面的代码是去掉 下拉框默认的下拉就箭头

 outline: none;当元素获得焦点的时候，焦点框为0.

然后父元素相对定位下拉那个三角绝对定位就不会跑出父元素的区域了

还有一种方法是  利用外层元素的宽度小于下拉框的宽度 父元素溢出隐藏的更改方式

父元素相对定位 图片绝对定位   子元素的高度和父元素一样  子元素宽度100%

清除边框和聚焦的边框  隐藏下拉箭头

感觉效果和上面的差不多

pointer-events: none;

应用pointer-events: none 的按钮，在页面上看到的这个按钮，只是一个虚幻的影子，可理解为海市蜃楼。用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

上午把任务十的小细节整改完了，下午学习sass 简单了解了嵌套关系

用sass的写法重写任务4

用弹性盒子。。最下面的字用浮动做的

placeholder="请输入密码"

属性规定可描述输入字段预期值的简短的提示信息该提示会在用户输入值之前显示在输入字段中。

用<label></label> 标签关联了跳转链接也加了最大最小宽度也加了清除聚焦的边框其他也没什么了

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线用none清除a标签的下划线

明天计划的事情：

继续学习sass语言学习变量相关知识把任务12写完

遇到的问题：

sass 需要慢慢理解

收获：

初步使用sass

返回列表