html中类似qq评论和发状态的布局实现-初学者



这是效果图::::

一下是实现代码::

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">


.demo01{width: 600px; position: relative;}
.left{width: 100px;float:left}
.left img{margin-left: 20px;}
.right{width: 458px;padding: 20px; float:right;background: cornflowerblue;border: 1px solid #ccc;}
.demo01 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}
</style>
</head>
<body>
<div class="demo01">
<div class="left">
<img src="img/head01.jpg" />
</div>
<div class="right">
<h6>樱桃小丸子</h6>
<p>根据国家规定,员工累计工作已满1年不满10年的,年休假5天;
已满10年不满20年的,
年休假10天;已满20年的,年休假15天。
                                      通常情况下,公司sfjksahdflka ;lhslkhaklhfla
                   khfdaklhkalhweiiiiiiiiiiiiii;a年休假必须在一个合同年内休完,逾期自动作废。
                   </p>
                   <span> 10分钟之前</span>
</div>
</div>
</body>
</html>


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: