有才华的人，别忘记给滋润你的那块土壤施肥
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  28 随笔 :: 5 文章 :: 147 评论 :: 0 Trackbacks
一些常用的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> 
效果为：

这里是完整的代码以及图片，下载
posted on 2008-12-20 13:42 kissjava 阅读(1996) 评论(3)  编辑  收藏 所属分类: js&css

评论

# re: 一些常用的css技巧 2008-12-20 14:16 HiMagic!
整理的不错  回复  更多评论
  

# re: 一些常用的css技巧 2008-12-21 07:32 heyang
不错，给个记号。

好像还有一个Js版的圆角Div，指定div类名即可。  回复  更多评论
  

# re: 一些常用的css技巧 2008-12-21 14:13 何永进
不错 学习了  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: