CSS做的通用divBox

1. base.css

html
{
 margin:0px;
 height:100%; 
} 
body
{
 margin:0 auto;
 height:100%; 
}

 

2. round_box.css

/*********** 圆角Box层 ***********/
.round_box{ font-size:12px; float:left; margin:3px; }

.round_box .linea,
.round_box .lined{ height:1px; overflow:hidden; background:#B4BDD4; margin:0 2px; }
.round_box .lineb,
.round_box .linec{ height:1px; overflow:hidden; border:1px solid #B4BDD4; border-top:0; border-bottom:0; margin:0 1px; }

.round_box .header, .round_box .body{
        border:1px solid #B4BDD4; border-top:0; border-bottom:0; background:#EEF4FB; overflow:hidden;
}
.round_box .body .content{
        overflow:auto;
}

.round_box .body .content table.list{ width:100%; table-layout:fixed; border-collapse:collapse; }
.round_box .body .content table.list td{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.round_box .body .content table.list td a{ text-decoration:none; color:#444; }
.round_box .body .content table.list td a:hover{ color:#000; }

.round_box .header{ height:30px; }
.round_box .header .title{ font-weight:bold; padding:8px 0 0 10px; float:left; }
.round_box .header .more{ float:right; padding:9px 10px 0 0; }
.round_box .header .more a{ text-decoration:none; color:#545D74}

.round_box .body{ padding:0 2px 2px 2px; }
.round_box .body .content{ background:#fff; padding:5px 2px 0 5px; }

/*********** 圆角Box层 配色方案A ***********/
.round_boxa .linea,  .round_boxa .lined{ background:#D19696; }
.round_boxa .lineb,  .round_boxa .linec{ border-color:#D19696; }
.round_boxa .header, .round_boxa .body{ border-color:#D19696; background:#FBEEEE; }
.round_boxa .body .content{ border-color:#D19696; }

/*********** 圆角Box层 配色方案B ***********/
.round_boxb .linea,  .round_boxb .lined{ background:#999; }
.round_boxb .lineb,  .round_boxb .linec{ border-color:#999; }
.round_boxb .header, .round_boxb .body{ border-color:#999; background:#efefef; }
.round_boxb .body .content{ border-color:#999; }

/*********** 显示滚动条 ***********/
.scroll{
        overflow:auto;
}
/*********** 圆角Box层 长度方案 与round_box放在一起 ***********/
.width_auto_box{width:100%; }
.width_big_box{width:500px; }
.width_middle_box{width:200px; }
.width_small_box{width:100px; }

/******** 圆角Box层 宽度方案 与content放在一起****************/
.height_auto_box{height:98%; }
.height_large_box{height:500px; }
.height_middle_box{height:200px; }
.height_small_box{height:100px; }

 

3.html文件示意

    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/round_box.css" />

 

<div class="round_box  width_middle_box">
        <div class="linea">
        </div>
        <div class="lineb">
        </div>
        <div class="header">
            <div class="title">
                标题5</div>
            <div class="more">
                <a href="javascript:void(0)">更多</a>&nbsp;&nbsp; <a href="javascript:void(0)">编辑</a></div>
        </div>
        <div class="body">
            <div class="linea">
            </div>
            <div class="lineb">
            </div>
            <div class="content height_small_box">
                <table>
                    <tr>
                        <td>
                            <a href="javascript:void(0)">满天飞舞，一片份血。永远是都是小人喻</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="javascript:void(0)">满天飞舞，一片份血。永远是都是小人喻</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="javascript:void(0)">满天飞舞，一片份血。永远是都是小人喻</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="javascript:void(0)">满天飞舞，一片份血。永远是都是小人喻</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="javascript:void(0)">满天飞舞，一片份血。永远是都是小人喻</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="javascript:void(0)">满天飞舞，一片份血。永远是都是小人喻</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="javascript:void(0)">满天飞舞，一片份血。永远是都是小人喻</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="linec">
            </div>
            <div class="lined">
            </div>
        </div>
        <div class="linec">
        </div>
        <div class="lined">
        </div>
    </div>

 

 

参考：

1. http://bbs.phpchina.com/viewthread.php?tid=87135

2. http://hi.baidu.com/dingchaojie/blog/item/37a0327a533690ea2f73b327.html