用图片实现圆角框

  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

<!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">
    
</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>

posted on 2010-02-27 13:56 Dufe王彬阅读(235) 评论(0) 编辑收藏举报