记录第三个简单小项目,黑马前端进阶课程。
html较为基础,主要是合理布局,还没有加上js
<!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="/less/css/index.css">
<link rel="stylesheet" href="/fonts/iconfont.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>
<!--内容区域-->
<section class="vedio_content">
<div class="vedio_list">
<a href="#">
<div class="pic">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>132</span>万
</p>
</div>
<img src="/images/1.jpg" alt="">
</div>
<div class="txt ellipsis-2">你活着不到就是对我最大的侮辱,寒心最强王者名言就是和救护车</div>
</a>
</div>
</section>
</body>
</html>
css样式
@import 'base';
@vw: 3.75vw;
@pink:#fb7299;
/*头部固定*/
header{
z-index: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: (84/@vw);
color: #fff;
// background-color: palevioletred;
.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: @pink;
}
}
.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: (40/@vw);
border-bottom: 1px solid #eee;
}
.more{
a{
display: block;
width: (40/@vw);
height: (40/@vw);
line-height: (40/@vw);
text-align: center;
// 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: @pink;
border-bottom: 2px solid @pink;
}
}
}
.vedio_content{
padding:(84/@vw) (5/@vw) ;
.vedio_list{
display: flex;
flex-wrap: wrap;
a{
width: 50%;
padding:(8/@vw) (5/@vw);
.txt{
margin-top: (5/@vw);
font-size: (12/@vw);
}
.pic{
position: relative;
}
.count{
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
width: 100%;
padding: (8/@vw);
color: #fff;
}
}
}
}