当前位置:首页>CG 教程>网页设计>

制作圆角表格

作者：麦甜圈出处：发布时间：2006-05-26 字体： [大中小]

做网页常常使用一些技巧，比如在
表格的四周加上导角，这样可以避
免直接使用表格的直角，而显得突
兀，我这儿给大家介绍一种简单的
办法，使你很快就能常握这种方法。

第一步做两个导角的图片，这两个
图片可以先做一个图片，然后到PH
OTOSHOP里垂直翻转一下就行
了，导角图片的做法，我简单的给
大家介绍一下，首先用PHOTOSHOP
先画一个矩形，然后羽化，然后
level。然后切图。OK！

在中间插入一个背景颜色同图片一
样的表格，长度也设为图片的长度，
将这个表格的cellpad设为1，其他
都为0就行了，cellpading是表格
边宽的意思，一定要设，不然就无
法形成表格两边的线了。

然后在这个表格里再插入一个宽度
为100%的表格，背景设为网页的
背景色。可以将这个表格的cellpad
设为3,其他可以设为0，然后我们
将这个表格的对齐方式设为top，这
样我们就完成了这个带导角的表格的
框架。

this is my homepage

do you like it ?

follow me ,
www.meetrice.
com
i will stay here
waiting your coming.

最后我们就可以在里面打字了，我们
可以把这个部分当然一个整体，复制
并粘贴到页面上不同的地方，你还可
以做几个不同长度的图片，放置到页
面上各个部位，就可以做个典型的商
务网站的首页了。

如果还有问题，欢迎和我联系：
meetrice@meetrice.com

这儿是这个效果的html代码，请参考：

<img src="onglet_haut.gif" width="125" height="15"><br>
</font>
<table width="125" border="0" cellspacing="0" cellpadding="1">
<tr bgcolor="#FFCC33" valign="top">
<td>
<table width="123" border="0" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF">
<tr align="left" valign="top">
<td>
<p><font face="Verdana, Helvetica" size="-2" color="#666666">this
is my homepage<br>
</font><br>
do you like it ?</p>
<p><font face="Verdana, Helvetica" size="-2" color="#666666">follow
me ,<br>
www.meetrice.<br>
com<br>
i will stay here <br>
waiting your coming.</font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<font face="Verdana, Helvetica" size="-2" color="#666666"> <img src="onglet_bas.gif" width="125" height="13">

↑返回顶部打印本页关闭窗口↓

收藏本文到：天极网摘新浪VIVI 和讯网摘博彩中心 365Key网摘 poco网摘狐摘
亿友响享Yeeyoo igooi-it网摘 5seek网摘 I2Key 我摘网摘天下图摘 YouNote 百特门

用户名：（新注册）密码：匿名评论 [所有评论]

评论内容：(不能超过250字，需审核后才会公布，请自觉遵守互联网相关政策法规。