目录

效果图

顶部相关代码

顶部效果图

内容相关代码 

内容效果图

 底部导航栏相关代码

底部导航栏效果图

完整代码

 html

css

js

​flexible.js

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

效果图

 

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

顶部相关代码

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

 

顶部效果图

内容相关代码 

视频部分，我们需要用一个盒子将几个视频、文字、头像等装起来。可以将这个部分分为四个部分：按钮、右边（点赞、评论、转发）、中间文字、循环播放。下面看该部分的部分代码（另外几个视频依照自己需求修改部分代码即可）：

内容效果图

 底部导航栏相关代码

底部导航栏可以分为五个部分：首页、朋友、加号、消息、我。下面看代码：

 

底部导航栏效果图

完整代码

 html

css

js

flexible.js