仿抖音首页界面

目录

效果图

顶部相关代码

顶部效果图

内容相关代码 

内容效果图

 底部导航栏相关代码

底部导航栏效果图

完整代码

 html

css

js

​flexible.js

要想做出抖音短视频的首页界面，我们要引用swiper插件、还需要用到iconfont图标（可自行到官网上下载）等。

效果图

 

我们可以将这个界面分为三个部分分别是：顶部（关注、推荐、附近）、中间（视频部分和右边点赞、评论、转发）、底部导航栏。利用swiper插件进行几个视频的滑动（swiper插件的用法可以去官网查看详细教程）。

顶部相关代码

我们可以用header组件来写该界面的顶部内容，又可以将顶部的分为三个部分（左边图标、中间文字、右边图标），下面看代码部分：

 

顶部效果图