css分类代码

html-css024

css分类代码,第1张

代码完成了，你加一个背景图片就OK了，我这里传不了图片

<!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}任何块状元素的高度默认都是auto

2 .正确使用方法

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 .