前台小模块CSS布局代码

结构代码如下：

        <div class="box">
          <h4>标题</h4>
          <dl class="title">
            <dd>更多</dd>
          </dl>
          <div class="content">
          内容
          </div>
        </div>

css代码：

1     *{ margin:0; padding:0;}
2     .box{width:200px;position:relative;}
3     .box h4{height:26px; background:#f00; line-height:25px;}
4     .title{position:absolute; top:1px;  right:3px;line-height:25px;}
5     .content{border:1px solid #CCDFF2;overflow:hidden;}

注意 *{ margin:0; padding:0;}是必须的  还有就是box的position:relative;是必须的  不然当你绝对定位“更多”时会出问题 
这样  我们要建这样的小模块  就很爽了  只要复制  修改  ，还可以在h4上用漂亮的背景图
好了附图我美化过的;