复刻LOFTER
- 上午和下午工程实训,中午熟悉了一下实习任务的相关要求,对整体规划和大致如何实现进行思考,晚上开始进行实习任务
- 完成了主页面的布局和一些细节填充
- 计划把使用的png格式图片全部换成svg格式
- 最初查看LOFTER主页面时发现顶部使用px控制了高度,于是布局页面时也部分使用了px,在大屏幕上显示时会有一点尴尬,不过与LOFTER效果相同
- github时常断断续续连不上,手机热点比校园网要更容易访问一些
- 备忘:准备使用<ul>与<li>布局一行图标
- 继续完善了主页的一些细节处理,包括字号、边框粗细、阴影、鼠标悬停效果等,完成了点击心变红,再次点击回到灰色的效果
- 布局了发现页面的顶部、导航栏和主要内容所占据的模块,与主页进行了相互链接
- 计划明天对发现页面进行主要内容的安排
- 在主页点击评论实现收起与展开和红心的变化时页面总会跳回到顶部,发现是因为使用了<a>实现图表的变化,应直接用css修改样式
- 终于实现了主页点击评论平滑展开的效果,过程艰难QAQ,实现了点击图片放大,再点击复原的效果
- 大致完成了发现页面的趋势Tab的主要内容,使用css构造的瀑布流
- 继续完善了一些细节
- 满课的一天,夹缝中找时间做任务
- 完成了发现页面的话题Tab的布局,感受到绘制草图确定数据的重要性
- 用flex的
flex-wrap: wrap;
、justify-content: space-between;
布局很方便 - 完成了发现页面的标签Tab的布局,css的nth-child选择器很好用
- 响应式设计可使用媒介查询单独设计,复刻网页时就不做随窗口大小产生变化的效果
- 满课的一天,头晕胃痛的一天,控诉西边小吃城的煎饼,夹缝中找时间做任务
- 完成了发现页面的全部布局
- 计划接下来完成首页的发布效果与开展用户界面
思考怎么实现首页的发布效果,实现了首页的发布效果,思考怎么做过渡动画,尝试了几种方案,大致完成了过渡效果- 完成了回到顶部的按钮,调整回到顶部的速度变化用了不少时间,做了滚动一点距离后按钮出现的效果
- 完成了页脚
- 完成了首页右侧为空时,menu模块出现并保持吸顶的效果
- 计划开始用户页面,用户界面的瀑布流用js实现
- 在校医院,今天没什么进展
- 备忘:图片懒加载,整理页面,补充数据
- 大致完成了用户界面01,下一页的按钮变化方案做了两种,保留了第一种方案,详情展开还没有做
- 完成了用户界面01,包括所有数据和细节处理
- 完成了用户界面02,征用了之前寝室写的异世界寝室AU
- 备忘:用户界面01和主页的链接
- 工程实训
- 利用中午的时间完成了图片懒加载,在解决和瀑布流的冲突上花费了不少时间
- 整理
- 研究了半天如何调用本地的Json文件,发现可以用Jsonp方式解决通过ajax请求本地文件时出现的跨域问题
- 将用户界面02的分页面由多页面改成了单页面,数据从本地Json文件中调取,处理了一些细节,包括页面内容更改后回到顶部,第一篇文章和最后一篇文章时相应按钮会消失等
- 待解决:如何从用户界面02的主页面进入相应的分页面,在跳转时传递一个参数?然后设置为j的初值?
- 多页面改单页面,从用户主页面进入相应分页面
- 修改首页评论展开样式
- 返回顶部按钮可以被打断
- 用户界面01瀑布流
- 主要数据动态填入
- 发布评论
- 发布动态,数字和字母自动换行
- 修改了menu模块侧边出现的bug
- 稍微调整了一下结构,拆分了一下文件,还是比较不清晰
- 修改了原来的一些问题