现在比较流行的是rem制作方法，但是现在大厂（b站等）已经开始尝试使用vw、vh技术了，所以要学习vw技术，vw技术的优点就在于不用引入js文件等，相对于rem比较简单，使用过程可以全部使用vw或者全部使用vh作为单位，不建议vw和vh混合使用模式。
单纯将字体图标和.css文件引入就可以了
<link rel="stylesheet" href="./fonts/iconfont.css"> <link rel="stylesheet" href="./css/index.css">
整体制作效果
分析：
这一部分是作为头部进行展示，这一部分要是用固定定位的效果进行压盖在最上面，大盒子又分为上下两个盒子，上面的盒子又分为左右两边，使用主轴两边贴的方式就可以了。
这一部分是盒子的视频展示区 整体有一个大盒子作为视频区，这个还得要注意使用换行处理，否则使用弹性布局的话就会使得8个盒子挤到一行显示。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>B站</title> <link rel="stylesheet" href="./fonts/iconfont.css"> <link rel="stylesheet" href="./css/index.css"> </head> <body> <!-- 1. 头部固定 --> <header> <div class="top"> <div class="left"> <a href="#"> <i class="iconfont Navbar_logo"></i> </a> </div> <div class="right"> <a href="#"> <i class="iconfont ic_search_tab"></i> </a> <a href="#" class="login"><img src="./images/login.png" alt=""></a> <a href="#" class="download"><img src="./images/download.png" alt=""></a> </div> </div> <div class="bottom"> <div class="tab"> <ul> <li><a href="#" class="current">首页</a></li> <li><a href="#">动画</a></li> <li><a href="#">番剧</a></li> <li><a href="#">国创</a></li> <li><a href="#">音乐</a></li> </ul> </div> <div class="more"> <a href="#"> <i class="iconfont general_pulldown_s"></i> </a> </div> </div> </header> <!-- tab: 菜单的个数要和内容的个数相等的 --> <!-- 2. 视频 --> <!-- 视频区域布局 --> <section class="video_content"> <!-- 一份视频, 共计有5个菜单, 应该有5份视频的div --> <div class="video_list"> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> <a href="#"> <div class="pic"> <img src="./images/1.jpg" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>132</span>万 </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>2.4</span>万 </p> </div> </div> <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div> </a> </div> </section> <!-- 3. 按钮固定 --> </body> </html>
@import 'base'; // @rootSize:3.75vw; @vw: 3.75vw; @color: #fb7299; // 头部 固定 header { position: fixed; left: 0; top: 0; z-index: 1; width: 100%; // width: 100vw; height: (84 / @vw); background-color: #fff; // top .top { display: flex; justify-content: space-between; align-items: center; height: (44 / @vw); padding-left: (18 / @vw); padding-right: (12 / @vw); .left { .iconfont { font-size: (28 / @vw); color: @color; } } .right { display: flex; .iconfont { font-size: (22 / @vw); color: #ccc; } .login { width: (24 / @vw); height: (24 / @vw); margin-left: (24 / @vw); } .download { width: (72 / @vw); height: (24 / @vw); margin-left: (24 / @vw); } } } // bottom .bottom { display: flex; justify-content: space-between; height: (40 / @vw); border-bottom: 1px solid #eee; .more { a { display: block; width: (40 / @vw); height: (40 / @vw); // background-color: pink; text-align: center; line-height: (40 / @vw); // font-size: (22 / @vw); color: #ccc; .iconfont { font-size: (22 / @vw); } } } .tab { ul { display: flex; li { padding: 0 (16 / @vw); a { display: block; height: (38 / @vw); line-height: (38 / @vw); font-size: (14 / @vw); &.current { color: @color; border-bottom: 2px solid @color; } } } } } } } // 视频 .video_content { padding: (84 / @vw) (5 / @vw) 0; .video_list { display: flex; // 弹性盒子换行 flex-wrap: wrap; a { width: 50%; padding: (8 / @vw) (5 / @vw); // background-color: pink; font-size: (12 / @vw); .txt { margin-top: (5 / @vw); } .pic { position: relative; .count { position: absolute; left: 0; bottom: 0; display: flex; justify-content: space-between; width: 100%; padding: (8 / @vw); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); color: #fff; i { vertical-align: middle; } } } } } }
