一些常用的css技巧

一些常用的css技巧

1、不用图片实现 Rounded corners
CSS代码如下：

.rtop, .rbottom {} {display:block;background:#fff;}
.rtop *, .rbottom * {} {display: block; height: 1px; overflow: hidden;background:#ccc;}
.r1 {} {margin: 0 5px;}
.r2 {} {margin: 0 3px;}
.r3 {} {margin: 0 2px;}
.r4 {} {margin: 0 1px; height: 2px;}
#withoutPic {} {
   width: 500px;    
   background:#ccc;
   color:#fff;
   margin:0 15px;
}

在BODY中加入：

< div  id =withoutPic >
              < b  class ="rtop" >
                 < b  class ="r1" ></ b >   < b  class ="r2" ></ b >   < b  class ="r3" ></ b >   < b  class ="r4" ></ b >
          </ b >
          < p > This is a example of "不用图片实现 Rounded corners " by kissjava !!! </ p >
          < b  class ="rbottom" >
           < b  class ="r4" ></ b >   < b  class ="r3" ></ b >   < b  class ="r2" ></ b >< b  class ="r1" ></ b >
          </ b >
       </ div >

效果为：

2、用图片实现 Rounded corners
CSS代码如下：

.withPic     {} { width: 300px; background: #fbeac3; border: 1px solid #534515; position: relative; margin: 10px 0;}
                .withPic .tl {} { position: absolute; width: 14px; height: 14px; background: url(images/box-two-tl.png); top: -1px; left: -1px; }
                .withPic .tr {} { width: 14px; height: 14px; background: url(images/box-two-tr.png); position: absolute; top: -1px; right: -1px; }
                .withPic .bl {} { width: 14px; height: 14px; background: url(images/box-two-bl.png); position: absolute; bottom: -1px; left: -1px; }
                .withPic .br {} { width: 14px; height: 14px; background: url(images/box-two-br.png); position: absolute; bottom: -1px; right: -1px; }
                .withPic .inside {} { padding: 10px; }

在BODY中加入:

  < div  class ="withPic" >
                 < div  class ="inside" >
                     < p > This is a example of "用图片实现 Rounded corners " by kissjava!!! </ p >
                 </ div >
                 < div  class ="tr" ></ div >
                 < div  class ="tl" ></ div >
                 < div  class ="br" ></ div >
                 < div  class ="bl" ></ div >
          </ div >

效果为：

3、Blockquote标签使用
CSS代码如下：

blockquote.style3  {} {
            font: 18px/30px normal Tahoma, sans-serif;
                  padding-top: 22px;
                  margin: 5px;
                background-image: url(images/openquote3.gif);
            background-position: top left;
            background-repeat: no-repeat;
             text-indent: 65px;
        }
          blockquote.style3 span  {} {
            display: block;
            background-image: url(images/closequote3.gif);
            background-repeat: no-repeat;
            background-position: bottom right;
        }

在BODY中加入:

< div  id =page-wrap >
            < blockquote  class ="style3" >
             < span >  
            This is a example of Blockquote by kissjava!!! < br />< br />     
         </ span >
        </ blockquote >
      </ div >

效果为：

4、From 表单
CSS代码如下：

label,input  {} {display: block;width: 150px;float: left;margin-bottom: 10px;}
label  {} {text-align: right;width: 75px;padding-right: 20px;}
br  {} {clear: left;}

在BODY中加入:

      < form >
                 < label  for ="name" > Name </ label >
                 < input  id ="name"  name ="name" >< br >
                 < label  for ="address" > Address </ label >
                 < input  id ="address"  name ="address" >< br >
                 < label  for ="city" > City </ label >
                 < input  id ="city"  name ="city" >< br >
          </ form >

效果为：

5、段落的第一个字占多行
CSS代码如下：

p.introduction:first-letter  {} {
    font-size : 300%;
    font-weight : bold;
    float : left;
    width : 1em;
}

在BODY中加入:

< div  id =page1 >
   < p  class ="introduction" >  
      这个例子是第一个字站住多行，至于占几行那得看你设置的值，多加几行。。。。。   
    </ p >
</ div >  

效果为：

这里是完整的代码以及图片， 下载