有才華的人，別忘記給滋潤(rùn)你的那塊土壤施肥
          
				
          
			          		
		
          
	
          

          

          
	
          
		
          
			
 
BlogJava ::
首頁(yè) ::
新隨筆 ::
聯(lián)系 ::
聚合
 ::
管理 ::


			
			
				

          
	
          
		
          
			
			
			
				 
				28 
				隨筆 ::
				5 文章
				::
				147 評(píng)論
				::
				0 Trackbacks
			
		
          
	
          

          

			          		
		
          
	
          

          


          


          
	
					

          
	
	
	
          
		1、不用圖片實(shí)現(xiàn) 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 "不用圖片實(shí)現(xiàn) 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、用圖片實(shí)現(xiàn) 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 "用圖片實(shí)現(xiàn) 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標(biāo)簽使用
          
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、段落的第一個(gè)字占多行
          
CSS代碼如下：
          

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

          

          <div id=page1>
          
            <p class="introduction"> 
          
      這個(gè)例子是第一個(gè)字站住多行，至于占幾行那得看你設(shè)置的值，多加幾行。。。。。   
          
             </p>
          
          </div> 
          
效果為：
          

          
這里是完整的代碼以及圖片，下載 

	
          
	
	
          
		posted on 2008-12-20 13:42 kissjava 閱讀(2023) 評(píng)論(3)  編輯  收藏  所屬分類: js&css 
	
          

          







          
	    
    


          

          
	
          評(píng)論
          
		
		
				
          			
					
          
						# re: 一些常用的css技巧
							
								2008-12-20 14:16
							
						HiMagic!
					
          
					
          
						整理的不錯(cuò)  回復(fù)  更多評(píng)論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: 一些常用的css技巧
							
								2008-12-21 07:32
							
						heyang
					
          
					
          
						不錯(cuò)，給個(gè)記號(hào)。

          

          好像還有一個(gè)Js版的圓角Div，指定div類名即可。  回復(fù)  更多評(píng)論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: 一些常用的css技巧
							
								2008-12-21 14:13
							
						何永進(jìn)
					
          
					
          
						不錯(cuò) 學(xué)習(xí)了  回復(fù)  更多評(píng)論
						
          
						  
					
          
				
          
				
          
			

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
		
		
          
		
          
			


		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          




    







          
        
	




主站蜘蛛池模板：
湘阴县|
上虞市|
屏南县|
台中县|
岗巴县|
仙居县|
静海县|
芒康县|
邢台市|
汤阴县|
荃湾区|
惠来县|
上杭县|
随州市|
盐城市|
长沙市|
聂荣县|
佛学|
桦川县|
满洲里市|
正镶白旗|
恭城|
台中市|
资源县|
西乌珠穆沁旗|
临沧市|
同仁县|
雷山县|
光泽县|
岢岚县|
玛纳斯县|
陇川县|
沅陵县|
克东县|
朝阳区|
乐山市|
宁河县|
北京市|
黔南|
白城市|
苍溪县|