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 >
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 >
http://files.cnblogs.com/wangbin/divcss.box1.zip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kagilo Testing</title>
<style type="text/css">
<!--
html, body { margin:0; padding:0; font-size:12px; line-height:20px; }
a { color:#000000; text-decoration:none; }
.container { margin:auto; padding:10px; }
.c1 { float:left; width:100px; margin-right:5px; }
.c2 { float:left; width:150px; margin-right:5px; }
.c3 { float:left; width:200px; margin-right:5px; }
.c4 { float:left; width:300px; margin-right:5px; }
.c5 { float:left; width:400px; margin-right:5px; }
.c6 { float:left; width:500px; margin-right:5px; }
.clear { clear:both; }
.b, .bt, .bc, .bm /* */
{
}
.b /* box */
{
position:relative; /* 为了使 .bm(更多) 飘到右上角 */
background:#ffffff url(box.gif) no-repeat bottom left; /* 整个box的背景，定位是 下左 */
}
.bt /* box title */
{
background:#ffffff url(box.gif) no-repeat top left; /* 还是同一个背景图，但定位是 上左 */
height:28px; line-height:28px; /* 标题的高度 */
padding-left:5px; /* 为了美观，左边空一点 */
color:#CA1A00; font-size:14px; font-weight:bold; /* 标题的字段，当然要好看点 */
}
.bc /* box content */
{
background:#ffffff url(box.gif) no-repeat bottom right; /* 内容区还是一个背景，定位是 下右 */
margin-left:5px; /* 注意，给左边5px的内补丁，这样把下左的边框显示出来：重要！ */
}
.bm /* box more */
{
position:absolute; top:0; right:0; /* 相对定位，在右上 */
height:28px; line-height:28px; /* 高度 */
background:#ffffff url(box.gif) no-repeat top right; /* 内容区还是一个背景，定位是 上右 */
padding-right:5px; /* 为了美观，右边空一点 */
}
-->
</style>
</head>
<body>
圆角框框1例子:
<div class="container">
<div class="c1">
<div class="b">
<div class="bt">标题</div>
<div class="bc">内容</div>
<div class="bm">更多</div>
</div>
</div>
<div class="c2">
<div class="b">
<div class="bt">标题2</div>
<div class="bc">要要要要<br />要要要要<br /></div>
<div class="bm"></div>
</div>
</div>
<div class="c3">
<div class="b">
<div class="bt">标题3</div>
<div class="bc">浮要要档要要枯<br />要要要要<br /><br />要要要要</div>
<div class="bm">更多...</div>
</div>
</div>
<div class="c4">
<div class="b">
<div class="bt">标题4</div>
<div class="bc">要要要要<br />要要要要<br />要要要要<br />要要要要<br /></div>
<div class="bm"></div>
</div>
</div>
<div class="c5">
<div class="b">
<div class="bt">标题5</div>
<div class="bc">要要要要<br />要要要要<br />要要要要<br />要要要要<br />要要要要<br /></div>
<div class="bm">更多...</div>
</div>
</div>
<div class="c6">
<div class="b">
<div class="bt">标题4</div>
<div class="bc">内容</div>
<div class="bm">更多...</div>
</div>
</div>
<div class="clear"></div>
</div>
<div>Kagilo@126.com</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kagilo Testing</title>
<style type="text/css">
<!--
html, body { margin:0; padding:0; font-size:12px; line-height:20px; }
a { color:#000000; text-decoration:none; }
.container { margin:auto; padding:10px; }
.c1 { float:left; width:100px; margin-right:5px; }
.c2 { float:left; width:150px; margin-right:5px; }
.c3 { float:left; width:200px; margin-right:5px; }
.c4 { float:left; width:300px; margin-right:5px; }
.c5 { float:left; width:400px; margin-right:5px; }
.c6 { float:left; width:500px; margin-right:5px; }
.clear { clear:both; }
.b, .bt, .bc, .bm /* */
{
}
.b /* box */
{
position:relative; /* 为了使 .bm(更多) 飘到右上角 */
background:#ffffff url(box.gif) no-repeat bottom left; /* 整个box的背景，定位是 下左 */
}
.bt /* box title */
{
background:#ffffff url(box.gif) no-repeat top left; /* 还是同一个背景图，但定位是 上左 */
height:28px; line-height:28px; /* 标题的高度 */
padding-left:5px; /* 为了美观，左边空一点 */
color:#CA1A00; font-size:14px; font-weight:bold; /* 标题的字段，当然要好看点 */
}
.bc /* box content */
{
background:#ffffff url(box.gif) no-repeat bottom right; /* 内容区还是一个背景，定位是 下右 */
margin-left:5px; /* 注意，给左边5px的内补丁，这样把下左的边框显示出来：重要！ */
}
.bm /* box more */
{
position:absolute; top:0; right:0; /* 相对定位，在右上 */
height:28px; line-height:28px; /* 高度 */
background:#ffffff url(box.gif) no-repeat top right; /* 内容区还是一个背景，定位是 上右 */
padding-right:5px; /* 为了美观，右边空一点 */
}
-->
</style>
</head>
<body>
圆角框框1例子:
<div class="container">
<div class="c1">
<div class="b">
<div class="bt">标题</div>
<div class="bc">内容</div>
<div class="bm">更多</div>
</div>
</div>
<div class="c2">
<div class="b">
<div class="bt">标题2</div>
<div class="bc">要要要要<br />要要要要<br /></div>
<div class="bm"></div>
</div>
</div>
<div class="c3">
<div class="b">
<div class="bt">标题3</div>
<div class="bc">浮要要档要要枯<br />要要要要<br /><br />要要要要</div>
<div class="bm">更多...</div>
</div>
</div>
<div class="c4">
<div class="b">
<div class="bt">标题4</div>
<div class="bc">要要要要<br />要要要要<br />要要要要<br />要要要要<br /></div>
<div class="bm"></div>
</div>
</div>
<div class="c5">
<div class="b">
<div class="bt">标题5</div>
<div class="bc">要要要要<br />要要要要<br />要要要要<br />要要要要<br />要要要要<br /></div>
<div class="bm">更多...</div>
</div>
</div>
<div class="c6">
<div class="b">
<div class="bt">标题4</div>
<div class="bc">内容</div>
<div class="bm">更多...</div>
</div>
</div>
<div class="clear"></div>
</div>
<div>Kagilo@126.com</div>
</body>
</html>
1946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
