效果图如下：
代码如下：（这个上下箭头的图标如上，图标可自己换）
复制代码 代码如下:
* { padding:0; margin:0; }
body { padding:100px; font:12px "宋体"; }
dl,dt,dd{list-style:none;}
.box { width:500px; border-bottom:1px solid #CCC; }
.box dt { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#eee url(img/bg.gif) no-repeat right -27px; }
.box dt.active { background-position:right 7px; }
.box dd { border-left:1px solid #ccc; border-right:1px solid #ccc; padding:0 10px; }
.box dd p{line-height:20px; }
- 标题一
-
第一项
第二项
第三项
- 标题二
-
第一项
第二项
第三项
- 标题三
-
第一项
第二项
第三项
- 标题四
-
第一项
第二项
第三项
