CSS做的通用divBox

我就是我 2022-08-12 01:20 128阅读 0赞

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文件示意

<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][http_bbs.phpchina.com_viewthread.php_tid_87135]

2. [http://hi.baidu.com/dingchaojie/blog/item/37a0327a533690ea2f73b327.html][http_hi.baidu.com_dingchaojie_blog_item_37a0327a533690ea2f73b327.html]

[http_bbs.phpchina.com_viewthread.php_tid_87135]: http://bbs.phpchina.com/viewthread.php?tid=87135
[http_hi.baidu.com_dingchaojie_blog_item_37a0327a533690ea2f73b327.html]: http://hi.baidu.com/dingchaojie/blog/item/37a0327a533690ea2f73b327.html