有才華的人，別忘記給滋潤你的那塊土壤施肥
          
				
          
			          		
		
          
	
          

          

          
	
          
		
          
			
 
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>
          
                       <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 閱讀(2019) 評論(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
							
						何永進
					
          
					
          
						不錯 學習了  回復  更多評論
						
          
						  
					
          
				
          
				
          
			

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			


		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          




    







          
        
	




主站蜘蛛池模板：
台东市|
会同县|
舒兰市|
榆中县|
黄石市|
高阳县|
鹤峰县|
南丹县|
图木舒克市|
建阳市|
天祝|
萝北县|
霍邱县|
南京市|
姜堰市|
崇文区|
子洲县|
伊吾县|
成都市|
丰顺县|
汝阳县|
榆社县|
临泽县|
方城县|
调兵山市|
手机|
阳山县|
弥勒县|
邢台县|
临高县|
长顺县|
正蓝旗|
南通市|
武夷山市|
金乡县|
格尔木市|
邵东县|
芦山县|
绿春县|
衡山县|
桦川县|