html中类似qq评论和发状态的布局实现-初学者
2016-07-12 09:19
363 查看
这是效果图::::
一下是实现代码::
<!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>
一下是实现代码::
<!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中flash总在最上层的解决办法,z-index无法控制flash的解决办法
- 实用导航条
- HTML的元素嵌套规则
- Html和CSS布局技巧
- HTML5学习_day12(2)--流式布局
- HTML5学习_day12(1)--html布局
- 常用Javascript技巧
- html块级元素实现过长文字部分显示
- 一张图理解网页布局
- 三栏布局的5种解决方案及优缺点
- HTML实现左侧内容可滚动,右侧列表固定布局
- css三栏布局
- IMWeb小白十天-结业作业
- HTML总结
- html select与option标签
- html与表格(table)相关的属性
- 表格
- 切图psd to html页面制作技术学习与总结
- 当当总结
- Freemaker初接触(二) 简单生成html文件