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;                                            } 可见与首字放大技术差不多。