哔哩哔哩游戏网页

大家好，欢迎来到IT知识分享网。

我把这个界面分为6个部分，分为： 1.顶部 2.顶部2  3.主体  4.主题2   5.底部 6.固定。基本图片都是从原官网扒的，有些动画感觉实现不了，就简单化或者静态化处理了。里面用的图标有些扒不到，就去阿里巴巴的矢量图标库里面找相似的了。

1. 顶部

这部分用简单的盒子堆积和浮动达到固定效果，添加hover达到改变颜色的效果

1. 顶部2

这一部分原官网的很复杂，12张图片做的旋转木马轮播图，让我抄都抄不明白，所以直接静态化，把三张图片堆到一起用第一张，盖住下面的图片，但是发现效果不太好，就试着用了transform中的3D效果勉强能看了，然后提高层级放到上面，背景部分因为有点不一样

原官网100%效果看不到全部，必须缩小，这个我不会，不知道该咋咋弄，我就直接100%放上去了

1. 主体

主体部分包括精品推荐和新游预约

精品推荐就写好一个模板复制，然后flex一下让在一行排好。

新游预约，这个原官网把内容写在图片上，在图片上加内容，还得固定位置，感觉也是写好一个模板就好了，但是我感觉我写不出来，就直接截图了，把那部分省略了，简单化。然后原官网的图片切换特别的丝滑，我才测应该是动画的一种吧，但是动画，不太会，我就用的盒子，把盒子属性隐藏，然后覆盖的时候显现，可以达到效果，但是一点都不丝滑。

1. 主体2  

这部分我不知道原官网怎么写的，我看到的时候就想把它分为左右两部分，所以就把大盒子分为左右两部分，两部分在慢慢的往里面填东西。左边部分就也是写好一个模板然后直接C V就行了，然后里面用了transition和transform达到放大的效果。右边部分也有些小内容是相似的然后写好一个模板然后改内容就好了，中间有一个分类也用了flex布局

1. 底部

这部分我感觉没啥写的了，主要最后写的有点累了，感觉有点烦了，不想写了，字太多了，就不想打了，直接上图片了。

1. 固定

这部分东西太少了，就一个固定在侧边栏，给图片加了个flex，给小火箭加了一个a链接

代码