歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

阿森纳热刺 www.tzxsac.com.cn 靠左靠右布局與只靠左布局阿森纳热刺實例???/p>

在實際阿森纳热刺布局中常?;嵊齙?,圖標式超鏈接布局,以下為大家介紹一個使用float實現的圖標布局。

采用css float布局效果截圖
采用css float布局效果截圖

本??槭褂胒loat浮動實現div css布局。通過兩種方法實現同種布局效果,第一種靠左float:leftfloat:right靠右實現布局,第二種使用兩個float:left靠左實現。間距使用padding實現與div間距效果。

一、案例關鍵代碼   -   TOP

1、CSS代碼

  1. .boxs{ margin:0 auto; height:70px; width:550px; background:#4089B2;
     padding-top:32px; overflow:hidden} 
  2. .box-left{ float:left; width:250px; text-align:right} 
  3. .box-right{ float:right; width:250px; text-align:left} 
  4.  
  5. .boxs2{ margin:0 auto; height:70px; width:550px; background:#4089B2; padding-top:32px} 
  6. .box-left2{ float:left; width:154px; padding-left:96px} 
  7. .box-right2{ float:left; width:154px; padding-left:50px} 

2、HTML代碼

  1. <p>使用靠左float:left 靠右float:right實現布局:</p> 
  2. <div class="boxs"> 
  3. <div class="box-left"><a href="#"><img src="images/ad1.gif" /></a></div> 
  4. <div class="box-right"><a href="#"><img src="images/ad2.gif" /></a></div> 
  5. </div> 
  6. <p>使用靠左float:left和padding實現布局:</p> 
  7. <div class="boxs2"> 
  8. <div class="box-left2"><a href="#"><img src="images/ad1.gif" /></a></div> 
  9. <div class="box-right2"><a href="#"><img src="images/ad2.gif" /></a></div> 
  10. </div> 

3、效果截圖

float實現圖標左右布局
float實現圖標左右布局

二、案例在線瀏覽與下載   -   TOP

1、css實例在線演示

查看案例

2、css div案例打包下載

阿森纳热刺實例采用div css布局,通過兩種方法實現其布局效果,大家可以學會利用float實現并列左右布局效果。

如需轉載,請注明文章出處和來源網址://www.tzxsac.com.cn/template/m779.shtml