章节
问答
课签
笔记
评论
占位
占位

页面的布局

本节在布局上的东西有点多,包括了页面的背景、星星、桥、水流、小女孩等多个元素。布局上所用的知识点都是之前学过的,所以这里不会在仔细的讲解了,具体的大家可以翻到之前的讲解看看,剩余的就是一些体力活了

为第三页面增加html结构与pageC.css的文件,在布局上背景图会分成三段,然后按照UI设计尺寸换成百分比去设置高度,这样主要是为了让小女孩的坐标一个参考点,因为小女孩同样也是采用“雪碧图”处理的,因此不能采用自适应缩放,位置也只能通过JS代码动态计算,具体代码部分有涉及,以桥为参考点,left是可视区中间点,top是桥上,这个算法在右边index文件的代码区域有详细的注释。

水波同样也是因为是精灵图的关系,所以导致水波在小的分辨率上会溢出了,这个也是避免不了, 所以做项目的时候一般都是会用单个图做自适应处理,我们这里主要是为了通过采用CSS3实现而设计的

具体的布局效果,参考右边的代码区域

任务

完成代码编辑器Swipe.js文件中的第17行代码,使效果展现处理。

var slides = element.find(">");

PS:自己探查var slides = element.find(">");var slides = element.find("li");的区别。

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?