B站案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<!-- 头部固定 -->
<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: 菜单的个数要和内容的个数相等 -->
<!-- 视频 -->
<section class="video-cotent">
<!-- 一份视频, 共计有五个菜单,未来应该有五份视频的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>
<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>
<!-- 视频结束 -->
<!-- 底部固定 -->
<footer>
<a href="#">
<i class="iconfont Navbar_logo"></i>
<span>打开App,看你感兴趣的视频</span>
</a>
</footer>
<!-- 底部固定结束 -->
</body>
</html>
CSS样式表
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
header {
position: fixed;
left: 0;
right: 0;
z-index: 1;
width: 100%;
height: 22.4vw;
background-color: #fff;
}
header .top {
display: flex;
justify-content: space-between;
align-items: center;
height: 11.73333333vw;
padding-left: 4.8vw;
padding-right: 3.2vw;
}
header .top .left .iconfont {
font-size: 7.46666667vw;
color: #fb7299;
}
header .top .right {
display: flex;
}
header .top .right .iconfont {
font-size: 5.86666667vw;
color: #ccc;
}
header .top .right .login {
width: 6.4vw;
height: 6.4vw;
margin-left: 6.4vw;
}
header .top .right .download {
width: 19.2vw;
height: 6.4vw;
margin-left: 6.4vw;
}
header .bottom {
display: flex;
justify-content: space-between;
height: 10.13333333vw;
border-bottom: 1px solid #eee;
}
header .bottom .more a {
display: block;
width: 10.66666667vw;
height: 10.66666667vw;
text-align: center;
line-height: 10.66666667vw;
color: #ccc;
}
header .bottom .more a .iconfont {
font-size: 5.86666667vw;
}
header .bottom .tab ul {
display: flex;
}
header .bottom .tab ul li {
padding: 0 4.26666667vw;
}
header .bottom .tab ul li a {
display: block;
height: 10.13333333vw;
line-height: 10.13333333vw;
font-size: 3.73333333vw;
}
header .bottom .tab ul li a.current {
color: #fb7299;
border-bottom: 2px solid #fb7299;
}
.video-cotent {
padding: 22.4vw 1.33333333vw 0;
}
.video-cotent .video-list {
display: flex;
flex-wrap: wrap;
}
.video-cotent .video-list a {
width: 50%;
padding: 2.13333333vw 1.33333333vw;
font-size: 3.2vw;
}
.video-cotent .video-list a .txt {
margin-top: 1.33333333vw;
}
.video-cotent .video-list a .pic {
position: relative;
}
.video-cotent .video-list a .pic .count {
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
width: 100%;
padding: 2.13333333vw;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
color: #fff;
}
.video-cotent .video-list a .pic .count i {
vertical-align: middle;
}
footer {
position: fixed;
left: 0;
bottom: 5.33333333vw;
width: 93.6vw;
height: 9.6vw;
padding: 3.2vw;
}
footer a {
display: block;
width: 93.6vw;
height: 9.6vw;
background-color: #fb7299;
border-radius: 4.8vw;
line-height: 9.6vw;
color: #fff;
font-size: 3.73333333vw;
text-align: center;
}
less代码
@import url(./base.less);
@vw: 3.75vw;
@color: #fb7299;
// 头部固定
header {
position: fixed;
left: 0;
right: 0;
z-index: 1;
width: 100%;
height: (84 / @vw);
background-color: #fff;
.top {
display: flex;
justify-content: space-between;
align-items: center;
height: (44 / @vw);
padding-left: (18 / @vw);
padding-right: (12 / @vw);
// background-color: green;
.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 {
display: flex;
justify-content: space-between;
height: (38 / @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-cotent {
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;
}
}
}
}
}
}
// 视频结束
// 底部固定
footer {
position: fixed;
left: 0;
bottom: (20 / @vw);
width: (351 / @vw);
height: (36 / @vw);
padding: (12 / @vw);
a {
display: block;
width: (351 / @vw);
height: (36 / @vw);
background-color: @color;
border-radius: (18 / @vw);
line-height: (36 / @vw);
color: #fff;
font-size: (14 / @vw);
text-align: center;
}
}
// 底部固定结束
效果图