网页制作之CSS高级应用经验

一,PNG图片透明的设置!（很多朋友应该在网页制作上遇到PNG透明图片的处理。网页默认是不能识别PNG透明度的？）

  解决方法,调放JS文件就OK.

二，表格边框的问题！

BORDER-COLLAPSE: collapse

三,图片等比例缩放 ( 想不到CSS也可以图片等比例缩放这一招,并且已测试通过,发代码如下,不懂者留言询之 )

解决方案一：（史上最好的CSS用于图片等比例代码）

img {width:expression(this.width > 100 && this.width > this.height ? 100 : true); height: expression(this.height > 100 ? 100 : true); }

支持IE6 FF 和IE7

解决方案二：

CSS/

.prod { margin-left:30px; float:left; margin-top:8px; width:150px; text-align:center; 
}
.prod a img{ border:1px #cccccc solid;
max-width: 150px; 
width:expression(this.width > 150 ? "150px" : this.width);
overflow:hidden;  }
.prod a:hover img{ border:1px #00CCFF solid;  }

HTML/

<table border="0" cellpadding="0" cellspacing="0" class="prod">
<tr>
<td><a href='piccontent166.shtml' title='小龙柏'><img src='UploadPic/20080228112519.jpg' alt=""  border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href='piccontent166.shtml' title='小龙柏'>小龙柏</a></td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="prod">
<tr>
<td><a href='piccontent165.shtml' title='百里樟城'><img src='UploadPic/20080228112503.jpg' alt=""  border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href='piccontent165.shtml' title='百里樟城'>百里樟城</a></td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="prod">
<tr>
<td><a href='piccontent164.shtml' title='紫薇'><img src='UploadPic/20080228112450.jpg' alt=""  border="0" /></a></td>
</tr>
<tr>
<td align="center"><a href='piccontent164.shtml' title='紫薇'>紫薇</a></td>
</tr>
</table>

四,H1,H2等标签应用换行的处理

通常在H1后直接跟文字或者图片时都会换行显示,说明H标签默认不是一般SPAN,但我们也有办法让他变成普通的属性.