console 命令行工具 X clear

console

<meta name="referrer" content="no-referrer">
<!-- QQ空间的照片可以显示，但CSS内的不可以 -->
<body>
	<header>
        <div class="left">
            <img src="https://qlogo2.store.qq.com/qzone/20794489/20794489/100?1609725007?rd=0.9188343740951705" 
                class="me" >
            <div class="introduce">
                <div class="myname">呆萌滴*它</div>
                <div class="Online">手机在线-WiFi ></div>
            </div>
        </div>    
        <div class="right">
            <img src="https://qlogo3.store.qq.com/qzone/907103790/907103790/50?1619679144">
            <img src="https://qlogo3.store.qq.com/qzone/2420155042/2420155042/50?1617149677" class="ui">
        </div>       
    </header>
    <section>
        <div class="personal">
            <div class="mm">
                <img src="http://qlogo1.store.qq.com/qzone/1017866168/1017866168/50" class="Photo">
                <div>
                    <div class="name">吕宗远</div>
                    <div class="chat">123</div>
                </div>
            </div>
            <div class="time">2020/7/5</div>
        </div>
        <div class="line"></div>
        <div class="personal">
            <div class="mm">
                <img src="http://qlogo1.store.qq.com/qzone/27310264/27310264/50" class="Photo">
                <div>
                    <div class="name">萧鸿达</div>
                    <div class="chat">123</div>
                </div>
            </div>
            <div class="time">2020/7/5</div>
        </div>
        <div class="line"></div>
        <div class="personal">
            <div class="mm">
                <img src="http://qlogo1.store.qq.com/qzone/285371832/285371832/50" class="Photo">
                <div>
                    <div class="name">姐姐</div>
                    <div class="chat">吃了吗</div>
                </div>
            </div>
            <div class="time">2020/7/5</div>
        </div>
        <div class="line"></div>
        <div class="personal">
            <div class="mm">
                <img src="http://qlogo4.store.qq.com/qzone/873466051/873466051/50" class="Photo">
                <div>   
                    <div class="name">小橘子</div>
                    <div class="chat">是的</div>
                </div>
            </div>
            <div class="time">2020/7/5</div>
        </div>
    </section>





</body>

body {
    width: 100%;
    background: #000000;
}

header {
    width: 100%;
    height: 100px;
    background-image: linear-gradient(#e66465, #9198e5);
    display: flex;
    justify-content: space-between;
    /* 想要改变两个子元素的位置  是在父级上面修改 */
}

.me {
    margin: 15px 15px;
    border-radius: 50%;
}

.left {
    display: flex;
}

.introduce {
    height: 50px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.right img {
    width: 40px;
    height: 40px;
    margin-top: 50px;
}

.ui {
    margin-left: 10px;
}

.Online {
    font-size: 5px;
}

.Interface {
    width: 100%;
}

.line {
    height: 1px;
    background: #888888;
    margin-top: 2px;
}

.Photo {
    margin-top: 15px;
    border-radius: 50%;
}

.name {
    width: 100px;
    color: white;
    margin-top: 15px;
    margin-left: 10px;
}

.personal {
    display: flex;
    justify-content: space-between;
}

.chat {
    color: white;
    margin-top: 10px;
    margin-left: 10px;
    font-size: 10px;
}

.time {
    color: white;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.mm {
    display: flex;
}