day 44 (作业)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            border: 3px solid white;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            z-index: 20;
            position: fixed;
            top: 50px;
            left: 50px;
        }
        .c2{
            width: 20%;
            height: 800px;
            background: gray;
            top: 25px;
            position: fixed;

        }
        .c3{
            position: absolute;
            margin: 230px 20px 20px;
        }
        p{
            text-align: center;
        }
        .c7{
            font-size: 30px;
            font-weight: bold;
        }
        #d1{
            background: rgba(128,128,128,0.5);
            border: white 3px solid;
            width: 79%;
            height: 1000px;
            border-radius: 15px;
            float: right;
            overflow: auto;
        }
        .c9{
            border: 3px white solid;
            border-radius: 5px;
            /*width: ;*/
            height: 130px;
            /*background-color: red;*/
            position: relative;
            margin: 10px;
        }
        .c10{
            width: 3px;
            height: 50px;
            background-color: red;
            display: inline-block;
            position: absolute;
            top: 2px;
            left: 4px;
        }
        .c11{
            position: absolute;
            left: 6px;
            /*top: 2px;*/
            font-size: 40px;
        }
        .c12{
             position: absolute;
             right: 6px;
             top: 10px;
             font-size: 25px;
        }
        .c13{
            position: absolute;
             left: 6px;
             top: 60px;
             width: 98%;
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="111.png" alt="">
</div>
<div class="c2">
    <div class="c3">
        <p class="c4">用户名:二娃</p>
        <p class="c4">年龄:保密</p>
        <p class="c4">特长:从小与水结下不解之缘,水量特别大</p>
        <p class="c7">#Python</p>
        <p class="c7">#Java</p>
        <p class="c7">#Golang</p>
    </div>

</div>
<div id="d1">
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
    <div class="c9">
        <div>
            <span class="c10"></span>
            <span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
            <span class="c12">公元1234年</span>
            <div class="c13">事成之后有必有重谢
                <hr>
                #python #java #golang
            </div>

        </div>
    </div>
</div>

</body>
</html>
posted @ 2019-11-14 22:57  &#127838;面包&#127838;  阅读(63)  评论(0编辑  收藏  举报