好主机建站-建站不再是梦想

立即注册开通网站

 

售前咨询QQ:599166136
登录官方论坛:http://bbs.letgo.com.cn/
加入建站技术交流群: 广州维派建站交流①

圆角表格的制作

做网页常常使用一些技巧,比如在表格的四周加上圆角,这样可以避直接使用表格的直角,而显得过于呆板,很多网友都提到过解决的办法,我们选取最有代表性两种方法来再现圆角表格的制作过程。

第一种制作方法:




1. 做两个圆角的图片,这两个图片可以先做一个图片,然后用photoshop软件垂直翻转一下就行了。



 


2. 在两个图片中间插入一个背景颜色同图片一样的表格,长度也设为图片的长度,将这个表格的单元间距设为1,其他都为0。



 


3. 将表格的单元格背景色设置为白色(从2、3两步可以看出这里其实是制作了一个细线边框的表格)




经过这样的处理后表格是不是漂亮多了呢!

4. 最后我们就可以在表格里面填写内容了,我们可以把这个部分当然一个整体,复制并粘贴到页面上不同的地方,当然你也可以改变整个圆角表格的尺寸,要做的就是改变圆角图片和插入表格的尺寸了。


代码如下:
<img height=15 src="/userlist/admin/data/userpic/20060823094159.gif" width=125> <br>
<table width="124" cellspacing="1" cellpadding="0" bgcolor="#0000FF">
<tr>
<td bgcolor="#FFFFFF">经过这样的处理后表格是不是漂亮多了呢!</td></tr></table>
<img height=13 src="/userlist/admin/data/userpic/20060823098287.gif" width=125>

  说明:其实就是两个圆角图片与一个细线表格组合在一起。

第二种制作方法(推荐用这种,因为要调整表格的宽度时,比较方便):

     1. 准备工作:制作两个小圆角图片,如右图。可以先制作一个,让后用相关软件翻转就可以了

2. 制作一个一行三列的表格。表格的单元间距、单元边距、边框均设置为零。宽度默认为100%,也可以设成固定的宽度,本例设为150像素。
3. 单击“显示隐藏指导方针”按钮,并将第一步的两个小图片分别插入第一、第三单元格。然后选中左边的小图片,再按一下向左的方向键,最后按退格键,将小图片前的一个空格删除。

4. 设置第一个单元格的水平对齐方式为左对齐,垂直对齐方式为顶部,使图片在单元格的左上方,第三个单元格的水平对齐方式为右对齐,垂直对齐方式为顶部,使图片在单元格的右上方。
5. 将每个单元单元格的背景色(注意是单元格)设置为插入的图片颜色相同。

 
这种表格是不是很眼熟啊?的确,我们可以在很多的大网站找到它的身影。
6. 在下面再插入一个同样边框颜色的细线表格(此步骤省略,如果不会,可参照http://study.51rich.net/web//index.php?action=newshow|study|779|cn|873|7),现在就可以在细线表格里写入内容了。


代码如下:
<table width="150" cellpadding="0" cellspacing="0" border="0">
<tr bgcolor="#7090ff">
<td valign="top" align="left" width="10"><img src="411-w03.gif" width="7" height="7"></td>
<td width="127" bgcolor="#7090ff"> </td>
<td align="right" valign="top" width="10"><img src="411-w04.gif" width="7" height="7"></td>
</tr></table>
<table width="150" cellspacing="1" cellpadding="0" border="0" bgcolor="#7090ff"><tr><td bgcolor="#FFFFFF">这种表格是不是很眼熟啊?的确,我们可以在很多的大网站找到它的身影。</td></tr>
</table>

  说明:它由两个单独的表格组成,其中第一个表格是出现圆角的关键! 

 
[ 点击数:] [打印本网页] [关闭本窗口]  

关注广州维派 你建网站,我来埋单!

网络营销之路 我们与您相伴

 

相关内容
  • 图文网页和门户网页有什么不一样? 2012-09-12
  • 佛山一网站编辑转帖称检察官嫖娼 被拘留10天 2012-03-03
  • 网页设计时必须注意的四件事 2010-10-25
  • 新浪mini音乐网页播放器小插件 2010-10-22
  • 网页设计进度指示器帮助用户预测步骤 2010-10-23
  • 打开网页是空白无内容的 2010-08-18
  • 无法进行网页编辑? 2010-03-19
  • 部分客户反映网页无法编辑 2010-03-15
  • 用iframe只显示网页特定位置 2009-12-17
  •  

     

     

    注册用户须知

    免 责 申 明

    粤ICP备12022451号

     关于我们

     联系我们

     如何支付

    广州维派网络科技有限公司

    (即好主机建站)

    LetGo.com.cn 版权所有

     维派互联 (域名)

     数据中心 (空间)

     维信通 (微营销)

     

    2016最新微营销,维信通正式上线,老用户尊享优惠。

    自助建站  智能建站  企业网站建设  永久免费做网站  易邻网

      网络114企业名录  申请友情链接  

    企业网站建设

    安全狗-arp防火墙/ddosf防火墙

    好主机自助建站

    维信通

    维品生活

    克隆网站

    做网站

    智能建站

    智能网站

    企业建站

      

    网站管理