HTML+CSS+JS+LESS的B站前端页面项目

1.页面展示

2. 页面结构分为

顶部背景图(top)

导航栏(nav)

banner + 六个视频区域(banner)

瀑布流区(目前正在打算用js生成数据)

然后就是两个隐藏的盒子 当页面被卷去的距离到一定位置就会出现的盒子

用来替换top盒子的 TopTwo盒子

到轮播图下面后出现的 NavTwo盒子

之后我还抽离出了三个公共样式 用来分别在top和TopTwo中使用 TopTwo通过继承，继承了大部分属性 最后小改了一部分以适应新的页面

下面是HTML继承的代码

可以看到top 和 TopTwo都分别使用了topcontent盒子

NavTwo也是相同的做法 NavTwo是在nav的继承样式上面改动的

3.less和css

整个项目我基本使用了less来完成 这样可以提高书写效率

之后我还追加了show类和hide类 然后通过js控制TopTwo盒子的显示的隐藏

之后我还定义了小三角型的移入移去的动画效果 也是通过js来控制的 代码一部分

最后我来讲讲首页的背景图片是怎么合成的把，我使用.big盒子相对定位 然后子元素也就是图片绝对定位然后通过z-index来设定层级 再通过top、left来控制图片的位置就可以完成背景图片的制作 这个背景图片制作还是需要一定的时间的 因为不仅需要调整位置 后期还需要通过js控制图片在translate(${translateX}px)或Y轴上面移动 一部分代码