qq空间说说

老规矩先分析一波

发表说说的时候会带有头像,所以我们可以用img或background。

左上角还可以加一些文字,可以用p标签实现
有了文字总得有图片吧,那这个图片就也可以用img或background来实现,推荐使用img

那么总体的一个框架就是

<div class="cont">
    <img src="pic/tou.png" alt="pic" class="tou">
    <p class="bt">Super invincible 菁</p>
    <p class="xxs">新鲜事</p>
    <h1>十一长假哪也不去,宅在家里看电影!</h1>
    <br>
    <br>
    <br>
    <br>
    <p class="wz">每逢长假,总有那么一群人选择远离人山人海,静静地呆在家里,坐在电脑电视前。长时间地工作学习让他们感到很疲惫,什么都提不起...</p>
    <img src="pic/katong.jpg" alt="kat" class="kat" align="left">
</div>

那么接下来就是css的样式了

css首先就要对整个div进行设置范围,也就是高度和宽度

width 和 height
当然,在这个div里也可以使用一个相对定位,这样方便我们后面图片的放置

position:relative;

那么接下来就看看完整的代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .cont{
            width: 400px;
            height: 100%;
            margin: 100px auto;
            position: relative;
        }
        .tou{
            border-radius: 50%;
            height: 20px;
            width: 20px;
        }
        .bt{
            position: absolute;
            top: 2px;
            left: 23px;
            font-size: 5px;
            color: #a09f9f;
        }
        h1{
            font-size: 15px;
        }
        .xxs{
            display: block;
            font-size: 10px;
            color: orange;
            position: absolute;
            right: -126px;
            top: 2px;
            border-right:3px solid orange ;
            padding-right: 10px;
        }
        .wz{
            display: block;
            width: 372px;
            font-size: 12px;
            color: #6b6a6a;
        }
        .kat{

            position: absolute;
            top: 56px;
            left: 378px;
            height: 103px;
            width: 151px;
            align-content: center;
        }
    </style>
</head>
<body>
<div class="cont">
    <img src="pic/tou.png" alt="pic" class="tou">
    <p class="bt">Super invincible 菁</p>
    <p class="xxs">新鲜事</p>
    <h1>十一长假哪也不去,宅在家里看电影!</h1>
    <br>
    <br>
    <br>
    <br>
    <p class="wz">每逢长假,总有那么一群人选择远离人山人海,静静地呆在家里,坐在电脑电视前。长时间地工作学习让他们感到很疲惫,什么都提不起...</p>
    <img src="pic/katong.jpg" alt="kat" class="kat" align="left">
</div>
</body>
</html>
© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
helin的头像-余心资源

昵称

取消
昵称表情代码图片