有才华的人,别忘记给滋润你的那块土壤施肥

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  28 随笔 :: 5 文章 :: 147 评论 :: 0 Trackbacks
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>
             
<class="rtop">
                
<class="r1"></b> <class="r2"></b> <class="r3"></b> <class="r4"></b>
         
</b>
         
<p>This is a example of "不用图片实现 Rounded corners " by kissjava !!!</p>
         
<class="rbottom">
          
<class="r4"></b> <class="r3"></b> <class="r2"></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>
  
<class="introduction"> 
      这个例子是第一个字站住多行,至于占几行那得看你设置的值,多加几行。。。。。   
   
</p>
</div> 
效果为:

这里是完整的代码以及图片,下载
posted on 2008-12-20 13:42 kissjava 阅读(2008) 评论(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 何永进
不错 学习了  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: