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

样式，表现分离--微博发言三种方式

2016-07-13 21:59 387 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微博用户发言</title>
<style type="text/css">
*{margin:0;padding: 0}
h6{font-size: 14px}
.demo1{width: 600px;position: relative;overflow: hidden;}
.demo1 .left img{margin-left: 20px;}
.left{width: 100px;float: left;}
.right{width: 458px;padding:20px;float: right;background:#B1E6EA;border: 1px solid #1F1E1E;}
.demo1 .right p{font-size: 12px;line-height: 25px}
.demo1 span{position: absolute;top: 10px;right: 20px;font-size: 12px}

.demo2 img{float: left;margin-left: 20px;}
.demo2{width: 600px;position: relative;overflow: hidden;}
.left{width: 100px;float: left;}
.right{width: 458px;padding:20px;float: right;background:#B1E6EA;border: 1px solid #1F1E1E;}
.demo2 .right p{font-size: 12px;line-height: 25px}
.demo2 span{position: absolute;top: 10px;right: 20px;font-size: 12px}

.demo3{width: 458px;padding:20px;background:#B1E6EA;border: 1px solid #1F1E1E;margin-left: 100px;position: relative;}
.demo3 img{float: left;margin: -20px 0 0 -100px}
.demo3 p{font-size: 12px;line-height: 25px}
.demo3 span{position: absolute;top: 10px;right: 20px;font-size: 12px}
</style>
</head>
<body>
<div class="demo1">
<div class="left">
<img src="image/head01.jpg"></img>
</div>
<div class="right">
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736</p>
<span>5分钟之前</span>
</div>
</div>
</br>
</br>

<div class="demo2">
<img src="image/head01.jpg"></img>
<div class="right">
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736</p>
<span>5分钟之前</span>
</div>
</div>
</br>
</br>

<div class="demo3">
<img src="image/head01.jpg">
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736</p>
<span>5分钟之前</span>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 样式-表现分离

相关文章推荐

新的分享

章节导航