1.效果图
2.## 标题
下面就是对a标签的复制
重点是CSS部分的,我使用的是Less语法,其中的注释就是一些注意点,下面放的是Less部分:
@import 'base';
// @rootSize:3.75vw;
@vw: 3.75vw;
@color: #fb7299;
// 头部 固定
header{
position: fixed;
left: 0;
top: 0;
**/* 要想往下翻的时候头部不会消失,要加上这个z-index
同时也要加上背景色,不然就是透明的
*/**
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;
**/*
正常而言,a标签为行内标签,如果想要设置大小的话
应该转为行内块或者块元素
一般而言我们会选择转行内块,这样的话就在一行了
但是转为行内块的话,我们在html写a标签的时候换行了,
在行内块上就会体现为标签之间会显示一个小间距
但是如果再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);
}
}
}
//buttom
.buttom{
display: flex;
justify-content: space-between;
height: (40/@vw);
border-bottom: 1px solid #eee;
.tab{
ul{
display: flex;
li{
padding: 0 (16/@vw);
a{
display: inline-block;
height: (38/@vw);
line-height: (38/@vw);
font-size: (14/@vw);
&.current{
color: @color;
border-bottom: (2/@vw) solid @color;
}
}
}
}
}
.more{
a{
display: inline-block;
width: (40/@vw);
height: (40/@vw);
text-align: center;
line-height: (40/@vw);
// font-size: (22/@vw);
color:#ccc;
.iconfont{
font-size: (22/@vw);
}
}
}
}
}
//视频
.video_content{
padding: (84/@vw) (5/@vw);
.video_list{
display: flex;
flex-wrap: wrap;
**/* 不加这个属性,弹性盒子就不会换行 */**
a{
width: 50%;
padding: (8/@vw) (5/@vw);
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;
}
}
}
}
}
}