Chapter：11.前端页面开发

11.10&11.首页动画效果和书架的实现

实现思路

再写一个书架模块 index-shelf.html ,并且调整首页元素的位置，将该模块与首页 商城 对应的所有模块的父元素并列，将 id=app 转移到上一层也就是最外层的 <div> ，因为其作用域要扩充到 书架 的模块文件上了

设定 商城 和 书架 的模块宽度为734px(后期会调整为动态调整)，添加一个宽度为1468px的空 <div> 元素，给其添加动画效果，以实现页面切换效果(因为实际上 商城 和 书架 模块是在同一个页面上的，只不过这两个不同时显示，只显示页面的一半区域而已，至于为什么不用DOM结点操作，因为性能差)

新添加的这些宽度、动画属性等之所以没有抽离出来而是写为内联样式，是因为这样是要被JS操作的样式

出现的问题

页面切换效果失败了，传参是正常的，就是修改了动画的那个参数之后，依然无法切换页面，书架 模块内容没有浮在页面右边，而是到了商城 模块的底下了，似乎是因为边界问题所以没有并列?还是因为之前设置的那个1468px的 <div>的问题?

STACKFLOW的也没有解决问题：

https://*.com/questions/4968387/why-floatleft-doesnt-work-with-a-fixed-width

问题解决了: 自己把结构搞错了

解决问题的思路历程：

是不是因为最外层限制了734px所以float就只能到下一行了?但是不对啊，最外层设置了overflow:hidden了，所以不是排不过去，只是会不显示而已，而且下面已经有一个 <div> 宽度为1468px了，应该能把页面撑开了呀?

但是后面两个元素都设置了float:left，为什么不是这3个 <div> 都排在一行呢?

我还是试着把最外层的设为1468px,结果后面两个734px的 <div> 就并排了，我就在想是不是第一个div和后面两个div的位置问题导致后两个无法并排，但是看上去确实没毛病，然后我就检查和老师的差别，发现老师的1468px的div在前面没有关闭标签，也就是1468px的div其实是后两个div的父元素！！！之前我一直以为它是独立的能撑开画面！

其实之前我也怀疑过它是不是一个空元素，因为跳着看视频没有看到老师关闭标签，但是看了 github 上别人的代码，发现就是把它当作空标签的(后来证明这个人的代码是错的)，所以就一直没有往这个方面考虑，

其实之前就已经露出端倪了，一是视频里老师的源代码上后两个div在第一个div的后还要再缩进一个位置，说明它们并不是并列关系(当时以为老师写得随意了)，还有就是添加了第一个div后搜索框上方多了一些空白，老师就把第二个div的top设为0px,那时候就觉得奇怪，一个没有设置高度的空div的高度是多少?把下一个div的top去掉就能对上那个宽度了么?