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

页面布局

第二个主题页面的布局，涉及了背景图，商店，门，灯等几个元素。为了方便静态页面布局，可以用个小技巧，修改下代码通过scrollTo直接定位到当前页面

//用来临时调整页面，1个页面宽，也就是第二个页面
swipe.scrollTo(container.width(),0)

新建一个pageB.css的样式文件，我们把与第二个页面相关的css样式都写入这个文件中，这个布局挺简单，自适应的关系采用的是百分比布局，可以按照UI设计的尺寸计算百分比

稍微注意下的就是商店的灯的亮度切换采用的是切换背景图片，背景图如果是没有预加载的话就有一个闪屏的问题，所以特意做了一个b_background_preload的节点让图片先加载，设置一个坐标不可见

商店的门是可以开关的所以在布局上会有个一左一右的处理

最后我们会用一个background-size:100% 100%的属性处理图片，不管分辨率怎么变化，图片始终都是填充整个尺寸

看看右边就是布局后的效果

任务

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/**
* 小孩走路
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/////////
//页面滑动 //
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
* {
padding
       : 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/*背景图*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/*背景图*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证，完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

收藏课程后，能更快找到我哦～

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后，及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

调用swipe.scrollTo(container.width(), 0);，第一页图就出现拉伸，不调用的话，可以正常显示

最新回答 / 慕梦前来
拉伸是因为加载的时间差的问题吧
1 回答 990 浏览
2021-12-20

背景图没有办法完全显示

+ 我来回答 回答最高可+2积分
2 回答 947 浏览
2022-04-06

背景图预加载失败！

最新回答 / weixin_慕沐9582734
访问地址从https://www.imooc.com/qadetail/210868换成http://....
2 回答 934 浏览
2019-04-04

这句什么意思？

最新回答 / 慕粉2040315312
没有发现这个问题，可能是网速问题你没有加载完毕图片就开始动作了.
1 回答 1072 浏览
2016-12-29

页面2的背景图显示不出来！！！

最新回答 / qq_兀耒_0
不是hidden的原因，<!--[if lte IE 6]>    <script type="text/javascript" language="javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>     <script type="text/javascript">     try{     DD_belatedPNG.fix('*');     }catch(err){}    /* 透明pN...
1 回答 945 浏览
2017-01-12

width: 32%; height: 100%; top: 32%; height: 68%; overflow: hidden; left: 58.5%;这些百分比的数值是从哪儿来的啊？？？

已采纳回答 / 我想做前端大牛
是根据ui设计的比例计算出来的，比如一个设计图纸页面是100的宽，而设计的图纸中的人站的位置是距离图纸左侧32，那么left值就可根据你换算的比例设置显示在你的浏览器窗口界面
1 回答 1385 浏览
2016-08-23

.charector里面为什么会有两个position: absolute;？？

已采纳回答 / 拼命做自己
两个position话，应该后面一个会覆盖前面一个，这是个人见解，欢饮吐槽
1 回答 1107 浏览
2016-08-23

w为什么这儿总是出错，不知道为什么说没有定义，但是我有定义，有链接Swipe.js的？麻烦大家帮我解决一下，好吗？谢谢！

最新回答 / 陪安东尼度过漫长的岁月
应用js文件路径出错
2 回答 888 浏览
2016-08-23

我怎么调整我的视窗到第二幅图 那里去啊？

最新回答 / echo_kinchao
是不是js没有调用引入？
1 回答 866 浏览
2016-08-23

商店的门 老是对不齐

最新回答 / carrieLiu
用老师的代码就是对齐的 我再找找原因把
3 回答 816 浏览
2016-08-23

求详细完整代码！！！

+ 我来回答 回答最高可+2积分
3 回答 813 浏览
2022-07-20

pageB.css的源代码在这

最新回答 / 小伟_lost_113
成图士     人体会带给人人员和软硬件
2 回答 940 浏览
2016-08-23

看不到pageB.css中的代码

+ 我来回答 回答最高可+2积分
4 回答 922 浏览
2022-08-09

pageB看不到啊老师...

+ 我来回答 回答最高可+2积分
4 回答 794 浏览
2022-07-24

pageB

已采纳回答 / 偌颜宁
有代码的，就在上面
2 回答 1371 浏览
2016-08-23
全部 我要发布
最热 最新
只看我的

推荐课程

推荐路线系统化学习，打造阶梯学习模式

相关课程

手记推荐

更多

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

账号登录 验证码登录

遇到问题
忘记密码

登录即同意慕课网《隐私政策》
代码语言