<!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>仿制bilibili</title>
<link rel="stylesheet" href="./m-bilibili/less/base.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3307217_xqm13kxj0r.css">
<style>
body{
background-color: aliceblue;
position: relative;
}
#tabbar{
width: 100vw;
position: fixed;
bottom: 0;
display: flex;
justify-content: center;
background-color: white;
height: 8vh;
}
.item{
flex: 1;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#nav{
background-color: white;
position: fixed;
z-index: 1;
}
#nav #search{
width: 100vw;
height: 6vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.tou img{
height: 6vh;
border-radius: 3vh;
}
#search input{
height: 4vh;
border-radius: 2vh;
background-color: rgb(221, 225, 229);
}
#search i{
font-size: 4vh;
margin: 0 3vw;
}
#every{
width: 100vw;
overflow: scroll;
margin-top: 3vh;
}
#every ul{
width: 140vw;
height: 4vh;
display: flex;
justify-content: space-around;
}
#body ul{
position: absolute;
padding: 10px;
top: 13vh;
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
ul .bodyitem{
width: 45vw;
height: 25vh;
background-color: white;
border-radius: 5px;
}
ul .bodyitem .bodyimg{
position: relative;
}
ul .bodyitem .bodyimg img{
width: 100%;
height: 60%;
}
ul .bodyitem .bodytext{
width: 100%;
height: 25%;
font-size: 2vh;
}
ul .bodyitem .bodypeople{
width: 100%;
height: 15%;
display: flex;
font-size: 2vh;
justify-content: space-between;
align-items: center;
}
.bodyoo{
width: 100%;
position: absolute;
bottom: 2px;
font-size: 1vh;
display: flex;
justify-content: space-around;
color: white;
}
ul .bodyitem .bodyimg::before{
width: 45vw;
height: 15vh;
content: '';
flex+vh制作B站移动端首页
最新推荐文章于 2024-04-20 23:43:40 发布