master

分支 (1)

管理

管理

master

weixin
/
video.html

<!DOCTYPE html>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/video.css">
<style>
    html,body{height:100%;}
    .all{
        background: black;
        height:100%;
        overflow: hidden;
        position:relative;
    }
    video{
        width:100%;
    }
    .top_nav{
        position:absolute;
        left:0px;
        top:20px;
        color:white;
        width:100%;
        padding:0px 10px;
        box-sizing: border-box;
    }
    .middle{
        color:rgba(255,255,255,0.5)
    }
    .tuijian{
        color:rgba(255,255,255);
        font-size:16px;
        border-bottom: 2px solid white;
        padding:0px 5px;
        padding-bottom:3px;
    }

    .middle>div{
        margin:0px 10px;
    }
    .middle img{
        width:18px;
        height:18px;
        margin:3px;
    }
    .friend{
        position:relative;
    }
    .friend .reddot{
        right:-8px;
        top:-8px;
        width:12px;
        height:12px;
        background:#d95252;
    }
    .bottom_nav{
        width:100%;
        height:60px;
        background:black;
        position:fixed;
        left:0px;
        bottom:0px;
    }
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<div class="all">
    <video muted loop src="assets/1.mp4"></video>
    <div class="top_nav flex sb">
        <div class="left">
            <img src="images/return.png" width="20" />
            <img src="images/zoom.png" width="20" />
        </div>
        <div class="middle flex">
            <div>关注</div>
            <div class="flex friend">
                <div>朋友</div>
                <img src="images/hearts.png" />
                <div class="reddot"></div>
            </div>
            <div class="tuijian">推荐</div>
        </div>
        <div class="right">
            <img src="images/icon_search.png" width="20" />
            <img src="images/my.png" width="20" />
        </div>
    </div>
    <div class="bottom_nav"></div>
</div>