一杯清茶
          

          

          


          
	
		

          統(tǒng)計
          
	
		

          留言簿
          


        
		
		
          Oracle SQL/PLSQL
          
		
				
			
	
		
          PowerDesigner教程系列 
          
		
				
			
	
		
          Struts2.0
          
		
				
			
	
		
          web開發(fā)
          
		
				
			
	
		
          三人行
          
		
				
			
	
		
          從事RCP開發(fā)的同行
          
		
				
			
	
		
          工作流和權(quán)限設(shè)置
          
		
				
			
	

        

          閱讀排行榜
          


		

          評論排行榜
          


	

          

          
	
					
	
          
		
          
			一些常用的css技巧 
		
          
		
          1、不用圖片實現(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 "不用圖片實現(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、用圖片實現(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 "用圖片實現(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、段落的第一個字占多行
          
CSS代碼如下：
          

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

          

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

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

		
          
			posted on 2008-12-22 11:03 一杯清茶 閱讀(112) 評論(0)  編輯  收藏  所屬分類: Struct1.x 
		
          
	
          
	
	


	


          
	    
    




          





          


          

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


          

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


		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          



    







          
        
	




主站蜘蛛池模板：
乌兰县|
云霄县|
大足县|
侯马市|
尚志市|
古蔺县|
襄城县|
仁布县|
栖霞市|
宜都市|
巴林左旗|
普洱|
塔城市|
鸡东县|
哈尔滨市|
温州市|
高密市|
枣阳市|
惠东县|
铜陵市|
根河市|
甘泉县|
青川县|
玉环县|
阿克陶县|
哈密市|
临夏县|
石嘴山市|
无棣县|
兴城市|
贡觉县|
泗阳县|
刚察县|
资溪县|
札达县|
北宁市|
株洲市|
玛多县|
阜平县|
沈阳市|
汝阳县|