发表于: 2018-06-30 23:17:08

1 697


今天完成的:

        了解了一下轮播图的实现原理(不过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)

          学到了两个表单元素的自定义样式改变方法(见上面遇到的困难)。



返回列表 返回列表
评论

    分享到