您的位置：首页 > Web前端 > HTML

html中类似qq状态的布局，评论+初学者实现方式

2016-07-12 09:21 429 查看
效果图如下：：



代码实现如下：：

<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html html布局 类似qq评论
相关文章推荐
新的分享
章节导航