寒假-抖音案例

效果
使用ie或火狐打开
http://dy.cytao.top/
<html>
    <head>
        <meta charset="utf-8">
        <title>抖音记录美好生活</title>
        <style>
            body{
                background-color: brown;
                color: white;
                margin: 0px;
            }
            #dou{
                width: 100%;
                height: 200px;

            }
            #dou-1{
                /* 当前div取消占一行的效果，允许占用多行 */
                float: left;
                width: 100px;
                height: 100px;
                margin-left: 100px;
                margin-top: 50px;

            }
            #dou-2{
                float: right;
                margin-top: 50px;
                margin-right: 200px;
                width: 300px;
                height: 100px;
            }
            #zj{
                height: 500px;
            }
            #zj-1{
                /* text-align: center; */
                margin-top: 250px;
                margin-left: 700px;
            }
            #zj-2{
                /* text-align: center;
                margin-top: 100px; */
                width: 350px;
                height: 100px;
                margin-left: 800px;
                margin-top: 100px;
            }
            #db{
                height: 100px;
                /* 文字对齐方式为居中 */
                text-align: center;
            }
            video{
                z-index: -99;
                position: absolute;
            }
        </style>
    
    </head>

    <body>
        <video src="img/douyin.mp4"
                controls="controls"
                autoplay="autoplay"
                loop="loop">
        </video>
        <div id="dou">
            <div id="dou-1">
                <img src="img/logo.png">
            </div>
            <div id="dou-2">
                抖音音乐人&nbsp;机构认证&nbsp;企业认证
                <img src="img/yinliang.png">
            </div>
        </div>
        <div id="zj">
            <div id="zj-1">
                <img src="img/wenben.png">
            </div>
            <div id="zj-2">
                <img src="img/appstore.png">
                &nbsp;
                <img src="img/android.png">
                &nbsp;
                <img src="img/erweima.png" width="50px" height="50px">
            </div>
        </div>
        <div id="db">
            <div></div>
            &nbsp;|&nbsp;用户&nbsp;&nbsp;
            &nbsp;|&nbsp;用户协议&nbsp;&nbsp;
            &nbsp;|&nbsp;用户服务协议&nbsp;&nbsp;
            &nbsp;|&nbsp;隐私政策&nbsp;&nbsp;
            &nbsp;|&nbsp;账号找回&nbsp;&nbsp;
            &nbsp;|&nbsp;联系我们&nbsp;&nbsp;
            <br/>
            &nbsp;&nbsp;2022&copy;抖音&nbsp;&nbsp;
        </div>
    </body>
</html>
评论 (0)
