1.初学者的理解与定义:div层层嵌套。
2.中级者的理解与定义:去掉多余的div,进行简化。
3.高手的理解与定义: 最大化的简化html的结构,然后用css进行设置,减少html与css的契合度。
<!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>
<style type="text/css">
.demo01{width:600px;position:relative;overflow:hidden;}
.demo01 .left{width:100px;float:left;}
.demo01 .left img {margin-left:20px;}
.demo01 .right{width:458px;padding:20px;float:right;background:#9cf;border:1px solid #ccc}
.demo01 .right p{font-size:12px;line-height:25px;}
.demo01 span {position:absolute;right:20px;top:10px;font-size:12px;}
.demo02{width:600px;position:relative;overflow:hidden;}
.demo02 img{float:left;margin-left:20px;}
.demo02 .right{width:458px;padding:20px;float:right;background:#9cf;border:1px solid #ccc}
.demo02 .right p{font-size:12px;line-height:25px;}
.demo02 span {position:absolute;right:20px;top:10px;font-size:12px;}
.demo03 {width:458px;padding:20px;background:#9cf;border:1px solid #ccc;margin-left:100px;position:relative}
.demo03 img {float:left;margin:-20px 0 0 -100px;}
.demo03 p{font-size:12px;line-height:25px;}
.demo03 span {position:absolute;right:20px;top:10px;font-size:12px;}
</style>
</head>
<body>
<div class="demo01">
<div class="left">
<img src="images/535ce105000118b504440337.jpg"width="44" height="33"/>
</div>
<div class="right">
<h6>樱桃小丸子</h6>
<p>颜色值由十六进制来表示红、绿、蓝(RGB)。
每个颜色的最低值为0(十六进制为00),最高值为255(十六进制为FF)。
十六进制值的写法为#号后跟三个或六个十六进制字符。
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。</p>
<span>10分钟之前</span>
</div>
</div>
</br>
</br>
<div class="demo02">
<img src="images/535ce105000118b504440337.jpg"width="44" height="33"/>
<div class="right">
<h6>樱桃小丸子</h6>
<p>颜色值由十六进制来表示红、绿、蓝(RGB)。
每个颜色的最低值为0(十六进制为00),最高值为255(十六进制为FF)。
十六进制值的写法为#号后跟三个或六个十六进制字符。
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。</p>
<span>10分钟之前</span>
</div>
</div>
</br>
</br>
<div class="demo03">
<img src="images/535ce105000118b504440337.jpg"width="44" height="33"/>
<h6>樱桃小丸子</h6>
<p>颜色值由十六进制来表示红、绿、蓝(RGB)。
每个颜色的最低值为0(十六进制为00),最高值为255(十六进制为FF)。
十六进制值的写法为#号后跟三个或六个十六进制字符。
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。</p>
<span>10分钟之前</span>
</div>
</body>
</html>
效果: