发表于: 2019-05-07 22:53:13

1 905


今天完成的事情:
1,修改任务14(15)细节
2,初步学习js

明天计划的事情:
继续学习js

遇到的问题:
1,手写轮播图部分
熟悉复制下来的代码时候通过逐一调试,明白了每一条代码的作用,copy的变得好像是自己敲出来的一般

见到了熟悉的渐变

.leftjianbian{
background: -webkit-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
}


然后是

.image1 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 31.25vw;
transform: scale(0);
opacity: 0;
transition: all 0.7s;

}

input:checked+.control .image1 {
opacity: 1;
transform: scale(1);
transition: all 1s;
}

这里我学习到的一点是checked+ 效果是通过设置透明度来实现变化的,第二点是原来的图片是通过transformscale 来调节隐藏与现实的,又学到了一招,毕竟我自己习惯用visibility:hidden/visible来调节。
然而transform的好处就是可以设置transitionall 1s;
也就是css的动画效果:淡入淡出时间!!!
于是马上应用到第三个页面

终于在css任务结束的时候掌握了一种(伪?)动画效果。

2,任务14(15)交给和蔼可亲慈祥可爱的师兄们检查出来一堆小问题,不过都能第一时间解决,问题不大。

但是可以就此总结一些html静态页面布局的常见问题。
~1~文字在窄分辨率换行(很正常好吧,为什么要说是崩了)就好了,加一个white-spacenowrap最多再加一个overflow属性配合处理一下就好了。

~2~引入组件化的css之后导致该组件对应的html模块大小与其他html模块大小不一样,比如一个是width:100%,一个是width:100vw,那么这两个html模块的宽度在浏览器中显示是不一样的,就会出现横向滚动条。
这个时候需要统一所有css的width宽度设置,要么都用100%,要么都用100vw。

但是在这里还是不明白为什么100%与100vw不一样,100%是一个相对父级元素的宽度,但是这里父级元素就是html,100%不就是绝对单位的100vw吗?(css重置了各种默认margin padding)
~3~妹有了,问题不大

3,js看的真有点懵,跟当初看scss的第一感觉一样,看不懂

2-1到2-6每个页面都敲一句,然后到2-7就有点懵,初次接触就是看都看懂了,但上手还是很难~

收获:
1,css对图片的一些动画处理,

transition: opacity 0.2s;
transition: all 1s;

2,css任务至此结束,常见的html+css问题基本都碰到并克服,满足感很强。


返回列表 返回列表
评论

    分享到