<!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/htmlcharset=gb2312" />
<style type="text/css">
.main{ width:300pxmargin:0 autoborder:1px solid #000}
.t0{ padding:8px 10px 5px 20pxfont-size:18px}
.t1{ padding:3px 10pxborder-top:1px solid #ccc}
.t1 .tt0{ font-size:14pxline-height:22px}
.t1 .tt1{ font-size:12pxline-height:18pxpadding-left:14px}
</style>
</head>
<body>
<div class="main">
<div class="t0">商品分类</div>
<div class="t1">
<div class="tt0"><img src="..." width="6px" height="6px" />上装</div>
<div class="tt1">T桖 | 吊带/背心 | 衬衫</div>
<div class="tt1">毛衣 | 羽绒服/棉纱 | 外套</div>
</div>
<div class="t1">
<div class="tt"><img src="..." width="6px" height="6px" />下装</div>
<div class="tt1">T桖 | 吊带/背心 | 衬衫</div>
<div class="tt1">毛衣 | 羽绒服/棉纱 | 外套</div>
</div>
<div class="t1">
<div class="tt0"><img src="..." width="6px" height="6px" />上装</div>
<div class="tt1">T桖 | 吊带/背心 | 衬衫</div>
<div class="tt1">毛衣 | 羽绒服/棉纱 | 外套</div>
</div>
<div class="t1">
<div class="tt"><img src="..." width="6px" height="6px" />下装</div>
<div class="tt1">T桖 | 吊带/背心 | 衬衫</div>
<div class="tt1">毛衣 | 羽绒服/棉纱 | 外套</div>
</div>
<div class="t1">
<div class="tt0"><img src="..." width="6px" height="6px" />上装</div>
<div class="tt1">T桖 | 吊带/背心 | 衬衫</div>
<div class="tt1">毛衣 | 羽绒服/棉纱 | 外套</div>
</div>
<div class="t1">
<div class="tt"><img src="..." width="6px" height="6px" />下装</div>
<div class="tt1">T桖 | 吊带/背心 | 衬衫</div>
<div class="tt1">毛衣 | 羽绒服/棉纱 | 外套</div>
</div>
</div>
</body>
</html>
1 .div:{height:auto,width:auto}任何块状元素的高度默认都是auto2 .正确使用方法
3 .div{matgin:auto}
4 .textarea{overflow:auto}
5 .img,input,button{vertial-align:baseline}
6 .div{background-position:0 0}
1 .clear:both。前后没有直接的浮动元素，没有必要使用
2 .inline元素不起作用的单样式:height,width,clear,margin-top,margin-bottom,overflow
3 .block水平的元素对vertical-align属性没有作用
4 .组合起作用的元素：z-index+position left,top,bottom,right+position
5 .
