div+css (3)

一、圖檔的樣式： 1、 圖檔的邊框 樣式表：   img.a{border-bottom-color:#CC0000; border-bottom:groove; border-bottom-width:thick;}   img.b{ border-style:dashed;               border-color:blue;                 border-width:2px;                 }   注意，B的樣式也可以修改為： border:dashed #0000FF 2px; 還可以利用 border-left等進行特定方位的邊框處理。   引用代碼如下： <img src="banana.jpg" class="a"> <img src="banana.jpg" class="b">   2、 圖檔的縮放： 樣式表： img.test1{ width:50%;             }   同樣可以設定height屬性來調整高度。 注意，這裡的百分比是相對于body也就是整個浏覽器而言的，當浏覽器調整大小，整個圖檔會跟着縮放。 如果想設定為固定的，那就設成XXpx 引用： <img src="pear.jpg" class="test1">   3、 圖檔的對齊方式：    text-align屬性        水準對齊方式：        直接在表格中的對齊：        <table width="100%" >        <tr><td style="text-align:left;"><img src="building.jpg"></td></tr>        <tr><td style="text-align:center;"><img src="building.jpg"></td></tr>        <tr><td style="text-align:right;"><img src="building.jpg"></td></tr> </table>        垂直對齊方式 <p>豎直對齊<img src="donkey.jpg" style=" vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p>        <p>豎直對齊<img src="donkey.jpg" style=" vertical-align:bottom;">方式:bottom<img src="miki.jpg" style="vertical-align:bottom;">方式</p>        <p>豎直對齊<img src="donkey.jpg" style=" vertical-align:middle;">方式:middle<img src="miki.jpg" style="vertical-align:middle;">方式</p>        <p>豎直對齊<img src="donkey.jpg" style= "vertical-align:sub;">方式:sub<img src="miki.jpg" style="vertical-align:sub;">方式</p>        <p>豎直對齊<img src="donkey.jpg" style=" vertical-align:super;">方式:super<img src="miki.jpg" style="vertical-align:super;">方式</p>        <p>豎直對齊<img src="donkey.jpg" style=" vertical-align:text-bottom;">方式:text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;">方式</p>        <p>豎直對齊<img src="donkey.jpg" style=" vertical-align:text-top;">方式:text-top<img src="miki.jpg" style="vertical-align:text-top;">方式</p>        <p>豎直對齊<img src="donkey.jpg" style=" vertical-align:top">方式:top<img src="miki.jpg" style="vertical-align:top">方式</p>   4、 圖文混排： img{        float:left;                                            } 可見與首字放大技術差不多。