發新話題

CSS教程《CSS屬性》圖文混排

CSS教程《CSS屬性》圖文混排

  ※圖文混排
  我們在來看看「容器」屬性還有什麼其他的屬性,請看屬性列表:

  上表中的float屬性很有意思,我們看看用它作的一個頁面效果(如下圖):

  您是不是以為在圖片那裡插入了一個表格才實現這種圖文混排的效果的呢?
  其實不是的,在這裡只是在<head>中定義了一下<img>的float和margin屬性,代碼如下:
   <html>
   <title>margin css</title>
   <head>
   <style>
   <!--
    img{margin-right:2em;float:left}
   
//*定義圖片的右邊距為2em,圖片浮動在文字的左邊*//
    -->
   </style>
   </head>
   <body>
   <p class=「p2」 style=「line-height:17pt」>
   <img src=「logo.gif」 alt=「floating」 >   
      我公司是一家以軟件開發及銷售為主業的高新技術企業。 位於高科技產業
    密集的清華大學東門,擁有近4000平米的獨立辦公樓,全體員工年輕勤奮而富
    有創造力,極具挑戰性和競爭性。</p>
   </body>
   </html>

  怎麼樣,不用表格也能實現圖文混排的效果,並且減少了大量的代碼。您還可以試試float的其他效果。
  好了,「容器」屬性就講這麼多,我們可以看出,充分利用CSS的「容器」屬性,將會使您的頁面佈局更加合理,樣式更加漂亮。下一節我將向您介紹分級屬性。

TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。