<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
</head>
<style>
.main{width:800px;position:relative;}
.main.left img{margin-left:20px;}
.left{width:50px;float:left;}
.right{padding:20px;width:688px;float:right;background:#999;border:2px green dashed;border-radius:20px;40px;}
p{font-size:12px;line-heght:25px;}
span{position:absolute;right:20px;top:10px;font-size:10px;}
</style>
<body>
<div class="main">
<div class="left">
<img src="../Pictures/Saved Pictures/6.jpg" width="60px" height="69"/>
</div>
<div class="right">
<h3>樱桃小丸子</h3>
<p>生活虽然一地鸡毛，但仍要欢歌高进，成长之路虽有玫瑰有荆棘，但什么都不能阻挡坚强的心。”，听了让人扎心，但也满目光芒……</p>
<span>10分钟前</span>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style>
body{margin:0;padding:0;}
.top{height:50px;background:#0FF;}
.head{width:200px;height:50px;background:#666;margin:0 auto;}
.main{width:800px;height:300px;background:#666;margin:0 auto;}
.left{float:left;background:#000;width:300px;height:300px;}
.right{widht:500px;height:300px;background:#F0F;float:right;}
.sub1{width:200px;height:300px;background:#F00;float:left;}
.sub2{width:300px;height:300px;background:#6F0;float:right;}
.foot{width:800px;height:50px;background:#909;margin:0 auto;}
</style>
<body>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="sub1"></div>
<div class="sub2"></div>
</div>
</div>
<div class="foot"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
</head>
<style>
.main{width:800px;position:relative;overflow:hidden;}
.main.left img{margin-left:20px;}
.main .left{width:50px;float:left;}
.main .right{padding:20px;width:688px;float:right;background:#999;border:2px green dashed;border-radius:20px;40px;}
.main .right p{font-size:12px;line-heght:25px;}
.main .right span{position:absolute;right:20px;top:10px;font-size:10px;}
.main2{width:800px;position:relative;overflow:hidden;margin-top:10px;}
.main2 img{float:left;}
.main2 .right{padding:20px;width:688px;float:right;background:#999;border:2px green dashed;border-radius:20px;40px;}
.main2 .right p{font-size:12px;line-heght:25px;}
.main2 .right span{position:absolute;right:20px;top:10px;font-size:10px;}
.main3{padding:20px;width:688px;background:#999;border:2px green dashed;border-radius:20px;40px;margin-left:65px;margin-top:10px;position:relative;}<!--向右移-->
.main3 img{float:left;margin-left:-65px;margin-top:20px;}<!--图片移回原来的位置-->
.main3 p{font-size:10px;line-heght:25px;}
.main3 span{position:absolute;right:20px;top:10px;font-size:10px;}
</style>
<body>
<div class="main">
<div class="left">
<img src="../Pictures/Saved Pictures/6.jpg" width="60px" height="69"/>
</div>
<div class="right">
<h3>樱桃小丸子</h3>
<p>生活虽然一地鸡毛，但仍要欢歌高进，成长之路虽有玫瑰有荆棘，但什么都不能阻挡坚强的心。”，听了让人扎心，但也满目光芒……</p>
<span>10分钟前</span>
</div>
</div>
<div class="main2">
<img src="../Pictures/Saved Pictures/6.jpg" width="60px" height="69"/>
<div class="right">
<h3>樱桃小丸子</h3>
<p>生活虽然一地鸡毛，但仍要欢歌高进，成长之路虽有玫瑰有荆棘，但什么都不能阻挡坚强的心。”，听了让人扎心，但也满目光芒……</p>
<span>10分钟前</span>
</div>
</div>
<div class="main3">
<img style="float:left;margin-left:-90px;" src="../Pictures/Saved Pictures/6.jpg" width="60px" height="69"/>
<h3>樱桃小丸子</h3>
<p style="font-size:12px;line-heght:25px;">生活虽然一地鸡毛，但仍要欢歌高进，成长之路虽有玫瑰有荆棘，但什么都不能阻挡坚强的心。”，听了让人扎心，但也满目光芒……</p>
<span>10分钟前</span>
</div>
</body>
</html>
3259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
