1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Kagilo Testing</title>
6 <style type="text/css">
7 <!--
8
9 html, body { margin:0; padding:0; font-size:12px; line-height:20px; }
10 a { color:#000000; text-decoration:none; }
11
12 .container { margin:auto; padding:10px; }
13 .c1 { float:left; width:100px; margin-right:5px; }
14 .c2 { float:left; width:150px; margin-right:5px; }
15 .c3 { float:left; width:200px; margin-right:5px; }
16 .c4 { float:left; width:300px; margin-right:5px; }
17 .c5 { float:left; width:400px; margin-right:5px; }
18 .c6 { float:left; width:500px; margin-right:5px; }
19 .clear { clear:both; }
20
21 .b, .bt, .bc, .bm /* */
22 {
23
24 }
25
26 .b /* box */
27 {
28 position:relative; /* 为了使 .bm(更多) 飘到右上角 */
29 background:#ffffff url(box.gif) no-repeat bottom left; /* 整个box的背景,定位是 下左 */
30 }
31
32 .bt /* box title */
33 {
34 background:#ffffff url(box.gif) no-repeat top left; /* 还是同一个背景图,但定位是 上左 */
35 height:28px; line-height:28px; /* 标题的高度 */
36
37 padding-left:5px; /* 为了美观,左边空一点 */
38 color:#CA1A00; font-size:14px; font-weight:bold; /* 标题的字段,当然要好看点 */
39 }
40 .bc /* box content */
41 {
42 background:#ffffff url(box.gif) no-repeat bottom right; /* 内容区还是一个背景,定位是 下右 */
43 margin-left:5px; /* 注意,给左边5px的内补丁,这样把下左的边框显示出来:重要! */
44 }
45 .bm /* box more */
46 {
47 position:absolute; top:0; right:0; /* 相对定位,在右上 */
48 height:28px; line-height:28px; /* 高度 */
49 background:#ffffff url(box.gif) no-repeat top right; /* 内容区还是一个背景,定位是 上右 */
50
51 padding-right:5px; /* 为了美观,右边空一点 */
52 }
53 -->
54 </style>
55 </head>
56 <body>
57
58 圆角框框1例子:
59 <div class="container">
60
61 <div class="c1">
62 <div class="b">
63 <div class="bt">标题</div>
64 <div class="bc">内容</div>
65 <div class="bm">更多</div>
66 </div>
67 </div>
68
69 <div class="c2">
70 <div class="b">
71 <div class="bt">标题2</div>
72 <div class="bc">要要要要<br />要要要要<br /></div>
73 <div class="bm"></div>
74 </div>
75 </div>
76
77 <div class="c3">
78 <div class="b">
79 <div class="bt">标题3</div>
80 <div class="bc">浮要要档要要枯<br />要要要要<br /><br />要要要要</div>
81 <div class="bm">更多...</div>
82 </div>
83 </div>
84
85 <div class="c4">
86 <div class="b">
87 <div class="bt">标题4</div>
88 <div class="bc">要要要要<br />要要要要<br />要要要要<br />要要要要<br /></div>
89 <div class="bm"></div>
90 </div>
91 </div>
92
93 <div class="c5">
94 <div class="b">
95 <div class="bt">标题5</div>
96 <div class="bc">要要要要<br />要要要要<br />要要要要<br />要要要要<br />要要要要<br /></div>
97 <div class="bm">更多...</div>
98 </div>
99 </div>
100
101 <div class="c6">
102 <div class="b">
103 <div class="bt">标题4</div>
104 <div class="bc">内容</div>
105 <div class="bm">更多...</div>
106 </div>
107 </div>
108
109 <div class="clear"></div>
110 </div>
111
112 <div>Kagilo@126.com</div>
113
114 </body>
115 </html>
https://files.cnblogs.com/wangbin/divcss.box1.zip