flex+vh制作B站移动端首页

<!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: '';
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值