绝对定位实现博客以及QQ空间页面小案例

Posted 2020-10-02 丰城人

实现代码

body结构

<div class="demo">
<img src="images/touxiang01.jpg" width="50" height="50" />
<h5>黎明破晓的街道</h5>
<p>于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，
也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻轻地问一声："噢，你也在这里吗？" </p>
<span>十分钟之前</span>
</div>

CSS代码

.demo{
width:500px;
padding:20px;
background:#3CF;
margin-left:100px;
position:relative;
}
.demo img{
float:left;
margin:-20px 0 0 -80px;
}
.demo p{
font-size:12px;
line-height:25px;
}
.demo span{
position:absolute;
top:30px;
right:20px;
font-size:12px;
}