Bilibili-静态网站

作者: _李祺 | 来源:发表于2017-06-18 21:58 被阅读225次

哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

  • 前言

大家好,之前的ToDo应用大家体验过了吗?这次带来的是国内某视频弹幕网站的页面(bilibili),作为一名B站的重度用户,所以一直想自己写一个B站页面挑战一下,二话不说,搞起~

  • 使用的技术

之前为了做ToDo,所以上手了React,现在回过头用jQuery来写页面的交互,发现有些API都忘记怎么用了,吓得我赶紧把之前的学习笔记复习了一遍,才有点回忆起的感觉。
1.HTML,CSS(3)
B站为了兼容IE,所以布局以Float为主,本人自从接触到了Flex布局,便彻底放弃了Float,什么兼容,边儿待着吧,自己的页面我说了算,顺便感谢下方方老师对Flex的推荐,Flex大法好!
CSS用了CSS3里面的一些动画效果,但还是以CSS为主。
2.jQuery
交互效果,轮播,鼠标事件,导航切换及各种姿势的切换效果都是用jQuery完成。每种效果采用了构造函数模式和继承来封装,达到了可复用性。
3.webpack
导入各个组件,用的是ES6的import和export语法(主要是好用),所以还要npm i -save 相关的babel,大家不要忘了,最后把js文件打包为一个整体。我是在前期就已经把页面分为一块一块的部分,CSS就直接在head标签里导入了。

  • 思路

说说我是怎么构思的,先看看B站的页面从动画板块开始,是不是布局都长得差不多,所以可以分版块来写,最后合并进index.html里,每个板块里面元素的class命名可以有规律一些,方便写CSS和jQuery,下面是我的分版块目录



合并完后就可以把分开写的文件夹删掉了,但我选择留着。。。
css和js目录

  • 预览

也没啥值得说的,大家就自己去看页面吧。。
在线预览
那个,觉得看着顺眼的,就给个star吧,小弟在此谢过了(逃~)
代码地址

李祺 ---2017年6月

相关文章

  • Bilibili-静态网站

    哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 前言 大家好,之前的ToDo应用大家体验过了吗?这次带来的是国...

  • Python爬虫任务分析

    爬虫分析 1.拿到目标网站 2.分析url,判断网站的动静态 3.静态网站和静态网站 如果是静态网站可以在分析好u...

  • 真静态实现

    真静态实现 静态化: 静态化是解决减轻网站压力,提高网站访问速度的常用方案.包括:纯静态和伪静态。 纯静态: 将P...

  • 服务器基本概念

    静态网站和动态网站 静态网站:不支持数据交互的网站;(例如:XXX.html xxx.htm)动态网站:支持数据交...

  • 相关web知识

    静态网站与动态网站: 静态:客户端无法与服务器交互数据 eg:html 动态: 网站技术 ...

  • 怎么快速搭建一个美观实用的博客?

    博客使用静态网站生成技术生成,静态网站生成是指静态生成网站的过程,即生成HTML文件,例如,在本地计算机中,然后将...

  • 04-Web网站基础架构和组成

    网站篇http协议(单独详细学习)静态网站(较动态网站更为安全)动态网站(多种结构组合)伪静态网站(本质是一个动态...

  • day41HTTP网络协议说明

    课程介绍部分 作业: 网站访问资源概念 静态资源: 动态资源 伪静态资源 网站访问度量方式 企业常用网站web服务...

  • 网站相关概念

    网站相关概念 静态网站和动态网站 静态网站 内容固定 容易被检索 没有数据库支持 交互性差 动态网站 可以根据用户...

  • 常用网站手册

    静态网站和博客 1 、https://jekyllrb.com 将纯文本转换为静态网站和博客。 2、https:/...

网友评论

  • u14e:很好看,我也想写一遍
    _李祺: @u14e 心动不如行动~
  • zsr0423:有几点疑惑。像css类名的嵌套你是手写的?
    .main-page > .anime> .anime-left >.anime-ct >.item >a >.info >.auther >.icon
    zsr0423:@饥人谷_李祺 可否加个联系方式 有问题请教你一下
    _李祺:虽然很累,但是确实是自己写的,写过一次之后,下次再也不想这样写了,要用less活sass。。。。
  • zsr0423:那个雪碧图你是怎么一次性拿到那么多icon然后生成的啊?
    zsr0423:@饥人谷_李祺 ok
    _李祺:b站上下载的啊,自己做累死了,一般这活是交给公司设计师的~
  • 付林恒:(⊙o⊙)哇厉害啊。。你已经学完了吗?
    _李祺: @付林恒 因为原网页很长,如果一开始就在index.html里写,不是不可以,就是看着麻烦
    付林恒: @饥人谷_李祺 把网页分成一个一个模块写,那怎么把他们都合起来呢?复制黏贴吗?
    _李祺:是的
  • jazenye:特地做了移动端适配吗?很强啊....做了多久啊
    _李祺: @jazenye 移动端没有专门适配。用flex写的话,移动端不会有大问题。不过移动端能看也挺意外(笑~)

本文标题:Bilibili-静态网站

本文链接:https://www.haomeiwen.com/subject/pwswqxtx.html