发表于: 2018-06-30 23:17:08
1 701
今天完成的:
了解了一下轮播图的实现原理(不过js部分没看太懂)。
看了下用css动画实现轮播效果的方法。
简单看了看浏览器的内核介绍。
基本完成了任务十的页面制作(响应式还没做)。
明天计划的:
做完任务十页面的响应式设计,将任务十提交。
抽空看看深度思考。
若能顺利完成任务十,就开始sass的学习,开始攻略任务十一。
遇见的问题:
>>>制作footer的时候,三列布局,使用flex进行布局,因为三个元素的宽度的原因,使用space-between中间的元素会偏右不少,看上去有点别扭。之后想要采用float布局,不过float浮动、position定位之后,元素不能撑起容器的高度,最下边的那行文字会向上浮动一点距离,虽然能通过padding、margin使效果看上去差不多,不过试着缩放了一下,在响应式的时候问题很大(因为给固定定位了。。。)。
解决方法:通过调整宽度、字体大小等样式,用flex进行布局,达到了想要的效果。后面做响应式也会方便很多。
>>>在做流程图(进度图)的时候,开始没什么思路,主要是在想怎么把小圆圈给放到条上去。
解决方法:开始想用定位来做,不过感觉会有点麻烦,就放弃了(现在想想好像该试一下来着。。。)。之后想到了用多个div给拼起来。
之后看了师兄的又知道了一种办法,将圆圈(div)放到长条(div)里面,然后flex将其居中,emmm,感觉很厉害。(不知道自己怎么想的,好像觉得球比长条大,就从没想过会有这种方法……学到了……)
>>>关于input(radio)按钮的自定义样式:这个样式是百度找的方法,然后稍作修改制作出来的。
(链接在这:https://blog.csdn.net/promisecao/article/details/54029848)
先将原按钮大小变成0,然后添加before、after伪元素,对两个元素进行样式设置达到改变样式的效果。
>>>关于select下拉选项的自定义样式:也是百度找到的方法。(自己在select元素上进行样式修改,只能改动大小、文字和边框属性,哦,还能把右边的三角删除。不过好像改变不了更多。)
(链接在这:https://blog.csdn.net/nuanxiasuiyuan/article/details/75663521)
>>>通过在select外面包一个div,然后清除select样式,对容器进行样式设置,还可以设置背景图片。然后通过pointer-events:none让图片的地方也可以进行点击。
今日收获:
了解了一下轮播图的实现原理:其主要使用的就是定时器,以及一些点击事件。
(参考链接:https://blog.csdn.net/github_38186390/article/details/75043077)
了解了一下用css制作轮播图(幻灯片可能比较合适)的方法:通过transform、transition来进行图片的切换操作。
(参考链接:https://www.cnblogs.com/czzaiba/p/5732390.html)
学到了两个表单元素的自定义样式改变方法(见上面遇到的困难)。
评论