关于bilibili官网的模仿网页

image.png

1.使用的技术

• HTML(5)， CSS（3），SCSS预处理器
  dom注意使用了语义化和删除无用结构，使用了scss预处理器，布局上以传统布局即float, position, display为主，尝试使用了flex布局，更多使用了css3的新语法，并且注意了css的精简和复用
• JS(ES6)，JQ
  轮播，选项卡，鼠标事件，返回顶部的切换，AJAX请求，jsonp请求数据等都是用JS+jQuery完成。每个相关调用函数都使用了类封装，采用模块化和面向对象的思路，达到了可复用性。
• webpack
  配置相关loader和插件，导入各个组件，用的是ES6的import和export语法。

2.代码结构

image.png

3.相关地址

• 预览地址：http://jazi.coding.me/bili-demo/dist/index.html
• 源码地址：https://github.com/JAZI6/bili-demo