码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-15 14:23:09      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:实现   margin   div   结构   空间   ima   com   qq空间   十分钟   

技术分享

实现代码

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;
}

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

标签:实现   margin   div   结构   空间   ima   com   qq空间   十分钟   

原文地址:http://www.cnblogs.com/luojunweb/p/7364560.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!