发表于: 2018-07-11 23:16:25
1 812
今天完成的:
因任务发现些问题,未能通过。现已完成任务。
对任务13和14做了一下总结。
明天计划的:
开始学习JS,攻略JS任务。
了解JavaScript数据类型、逻辑运算符、条件语句和循环语句。
遇到的问题:
今天主要解决的是轮播图的问题。因为想要使用纯CSS来制作轮播图,昨天百度了一些写法,参考一个结构相对简单的来写了一下。不过缺点就是不可控制(交互),只是一个幻灯片似的动画。
通过 input【radio】来控制图片(动画)解决了该问题。不过因为原本方法的代码不好改动,所以使用了别的方法。
今日收获:
学写了animation动画效果。要用到@keyframes。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
相比于transition,animation可以增加关键帧的节点,来制作较为复杂的动画效果。
轮播图的几种方法。
第一种(不能控制显示第几个):
原理:将五张图片叠加放到一起,通过控制 opacity 来显示某张图片。制作一个动画,让每张图片显示五分之一的时间(包括过渡),然后进行延迟播放,间隔4秒。这样5张图片就会交替出现。然后同理设置一个获取焦点的动画(底部的小白点)。因此动画的轮播图和焦点是分离、同步的,二者除了显示时看着同步之外,没有什么关系,仅起到一个提示作用。
(参考链接:https://www.jianshu.com/p/28643f36011e)
第二种(通过 radio 的 checked 状态来控制动画/轮播图):
原理:设置五种动画效果,分别从第一张开始、第二张开始以此类推,然后让底部的“焦点”来控制播放哪个动画,以起到点击“焦点”能跳转到该轮播图的目的。
(参考链接:https://codepen.io/lucifier/pen/DicEn)
了解了一下通过js获取浏览器宽高、元素尺寸的方法:
通过浏览器获得屏幕的尺寸:
screen.width
screen.height
screen.availHeight //获取去除状态栏后的屏幕高度
screen.availWidth //获取去除状态栏后的屏幕高度
获取浏览器窗口内容的尺寸:
//高度
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
//宽度
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidht
/ *
* window.innerHeight FF/CH 支持,获取窗口尺寸。
* document.documentElement.clientHeight IE/CH支持
* document.body.client 通过body元素获取内容的尺寸
* /
滚动条滚动的高度:
document.documentElement.scrollTop || document.body.scrollTop
获取元素的尺寸:
elemnt.offsetWidth
elemnt.offsetHeight
任务总结:
任务名称:CSS任务13
成果链接:https://hanxiaoran906.github.io/testgit/Project/Tasks/Task13/Task13.html
任务耗时:7.4~7.6 共计3天
技能脑图:
个人脑图:
官网脑图:
任务总结:
a.任务进度符合预期,无延期。
b.这个任务的主要目标是增加sass的熟练度,以及按照规范来规范代码,培养一个良好的编程习惯。之外就是要熟练页面布局。
c.重新写任务七的过程中布局没遇到什么麻烦,因为之前都写过一遍,思路还是比较清晰。
在写sass的时候,就是把常用到的、或经常出现的样式提取出来,创建变量或者混合宏来进行调用,能简化代码,提高效率。
第一个页面的侧边相比任务七多了一个菜单栏,需要通过一些方法隐藏、显示。当时写的时候思路不是特别清晰。大概思路跟做护工页的下拉选项是一样的,使用ul,然后隐藏,通过别的操作(如hover,active等)触发显示。之后又了解到一种方法,通过 input【checkbox】的checked的状态来控制侧边列表。
在使用 button +JS 的时候要注意判断条件(我写的是通过判断侧边栏的状态控制)要写对显示状态的判断,若写对隐藏状态的判断,则第一次会不起作用。
任务名称:CSS任务14&15
成果链接:https://hanxiaoran906.github.io/testgit/Project/Tasks/Task14&15/Task14.html
任务耗时:7.7~7.11 共计5天
技能脑图:
个人脑图:
官网脑图:
任务总结:
a.任务进度符合预期,无延期。
b.这个任务的主要是学习拆分组件,不用bootstrap框架,重新用sass写一遍任务8、9。通过拆分组件使网页结构易于维护和合作开发,通过这个任务提前接触了组件化思想,为以后学习js做好准备。
c.遇到的问题有:之前任务8、9使用bootstrap写的响应式导航栏、栅格布局、面包屑导航以及轮播图,现在要自己挨个实现一遍。
因为头部、导航栏和底部在三个界面中是一样的,便可以写好之后拿来组件直接使用。
响应式导航栏通过媒体查询以及 checkbox 控制768px以下时出现的隐藏导航栏来实现。
“职业介绍”页面的表格,使用 div 互相嵌套模拟的表格,用到了 float 和 flex。
面包屑导航栏没什么难度,直接用 ul、li 模拟就好了。
轮播图的话遇到不少麻烦,好好学习了一下 transition、animation 动画,然后通过 input【checkbox】来控制点击事件。
评论