您在本站的位置:主 页 >> 站长专区 >> 站长作品:《在网页中制做边角圆润的图形》
《中国电脑教育报》2001.1.3 第1期44版】    在网页中制做边角圆润的图形
    互联网上网页的样式越来越繁多,看惯了方方正正的图片, 就看见有的网页上带着圆润的边角的图形、表格别有新意。其实,这些效果做起来并不复杂, 一般实现起来有以下几种方法:
    1、直接用图片实现。
    这是最简单也是最笨的方法,就是用图形处理工具将图片的边角整圆, 然后直接贴上网页。方法虽然简单,但是生成的图片未免字节数太大,尤其是图片数量很多时, 对网页的浏览速度影响很大。
    2、用表格和小图片构造圆润的边线。
    这种方法要求制做两幅背景透明的图片,图片上的直线两头弯曲, 分别作为表格的上边和底边。然后用表格构造出左、右两个边,四条线围成一个圆角的矩形, 看起来浑然一起,非常美观(图一)。代码示例如下,其中上、下两幅图片为 table_top.gif 和 table_bottom.gif,左右边线用宽度为 1、背景色为 #ff9900 的表格单元实现: <table border="0" cellPadding="0" cellSpacing="0" width="170"> <tr> <td colspan="3" width="170"><img border="0" src="table_top.gif" width="170"></td> </tr> <tr> <td bgColor="#ff9900" width="1"></td> <td width="168" valign="top" align="center"> <br><br>用表格和小图片构造<br>圆润的边线<br><br> </td> <td bgColor="#ff9900" width="1"></td> </tr> <tr> <td colspan="3" width="170"><img src="table_bottom.gif" width="170"></td> </tr> </table>
图一
图一
图二
图二
图三
图三
    3、用表格和小图片“削”圆边角。
    这种方法可以制做圆角实心的矩形图形(图二)。整圆四个角使用了四幅 6x6 的微型图片,图片一半透明,一半为白色。左上角图片的示意图如图三。代码示例如下,其中 whitecorner-ul.gif、whitecorner-ur.gif、whitecorner-ll.gif、whitecorner-lr.gif 为左上、 右上、左下、右下四幅图片。 <table bgColor="#cce6ff" border="0" cellPadding="0" cellSpacing="0" width="140"> <tr> <td width="6"><img src="whitecorner-ul.gif" width="6" height="6"></td> <td></td> <td align="right" width="6"><img src="whitecorner-ur.gif" width="6" height="6"></td> </tr> <tr> <td width="6"> </td> <td align="middle"><br>用表格和小图片<br>“削”圆边角<br><br></td> <td width="6"> </td> </tr> <tr> <td width="6"><img src="whitecorner-ll.gif" width="6" height="6"></td> <td> </td> <td align="right" width="6"><img src="whitecorner-lr.gif" width="6" height="6"></td> </tr> </table>    实际上,在网页制做中,可以应用上述方法构造出各种各样的曲线图形, 使网页看起来线条流畅、生动活泼,达到功能性和观赏性的完美结合。
     张庆 Email: zhangking@263.net 2000.12.10
返回“站长专区”
Copyright(C) By ZhangQing 张庆 返回主页
站长邮箱:zhangking@263.net  Bp:029-95808 呼 822686