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%" border="1">

       <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;                              /* 文字环绕图片 */

       /*margin-right:50px;                    /* 右侧距离 */

       /*margin-bottom:25px;                 /* 下端距离 */

}

可见与首字放大技术差不多。