低仿Bilibili网页HTML/CSS/JavaScript实现
低仿 Bilibili 的网页，纯用 Html、CSS、JavaScript 撸出来的，还挺完整。页面结构、交互、样式细节都做得比较用心，挺适合练手或者当参考项目。你要是刚入门，或者想搞个前端大作业交差，这个蛮合适的。
导航栏的flex 布局用得挺溜，左边一排ul做菜单，中间是搜索框，右边用户区走的是position: absolute，响应也快，结构也清晰。对比一下 B 站的导航，你能发现仿得还挺像。
Main 区域是重点，1400px宽，塞了推荐、直播、漫画啥的一堆模块，布局上直接用grid，行列分得明明白白。模块间用padding-bottom: 56px隔开，页面看起来不会挤，还挺舒服。
频道channel部分也是flex布局，四周留了55px的margin，整体居中对齐，视觉上也平衡。虽说是“低仿”，但不少小细节比如卡片间距、hover 效果都做到了，蛮有诚意。
你可以把它当作练习项目，从头撸一遍熟悉下HTML 结构、CSS 布局、原生 JS 交互的配合。如果你想参考更多布局技巧，下面这些文章也挺值得一看。
文件大小：20.52MB
评论区