惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
V2EX
C
Check Point Blog
博客园_首页
B
Blog
D
Docker
U
Unit 42
量子位
I
InfoQ
有赞技术团队
有赞技术团队
Martin Fowler
Martin Fowler
GbyAI
GbyAI
L
LangChain Blog
云风的 BLOG
云风的 BLOG
博客园 - Franky
美团技术团队
T
The Blog of Author Tim Ferriss
阮一峰的网络日志
阮一峰的网络日志
月光博客
月光博客
Vercel News
Vercel News
Recent Announcements
Recent Announcements
雷峰网
雷峰网
大猫的无限游戏
大猫的无限游戏
小众软件
小众软件
Google DeepMind News
Google DeepMind News

博客园 - 老男孩玩编程

PHP双冒号::的用法 php中的反引号 十四条令PHP初学者头疼问题大总结 免费开源微博程序大全——免费开源微博对比解析 JavaScript窗口与提示大全 大型网站,我建议要考虑的问题: 关于GridView中自定义分页、单选、多选的简单应用 SQL精华 ASP.NET编程中的十大技巧 SQL SERVER临时表的使用 有效编写软件的75条建议 IT从业人员必看的10个论坛 程序员每天该做的事 动态生成button并关联其onclick事件 使用C#从数据库读取图像二进制流的代码 在ASP.NET 中实现单点登录 简单的数据连接方法 ASP.NET程序中常用的三十三种代码 SQL语法全集
制作精美圆角表格两种方法
老男孩玩编程 · 2007-01-25 · via 博客园 - 老男孩玩编程

做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。

  
方法一:用图片制作圆角表格

  这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法。

  ①先用Photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分(如图1),复制它。
单击在新窗口中浏览图片

  ②不要取消选取,直接新建一副图像,Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后,保存为WEB所用格式即可。

  ③重复步骤②,分别用“水平翻转”工具和“垂直翻转”工具,保存另外三个方向的圆角。(如图2)

单击在新窗口中浏览图片

④打开网页制作软件,这里以Dreamweaver为例。插入一个一行三列的表格,设置其CellPad、CellSpace和Border属性值都为0。在第一列插入图片1.gif,第三列插入图片3.gif,并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色,设置宽度为整个表格的宽度减去两个图片的宽度,并打开源代码察看器,删除这列中的字符” ”(Dreamweaver会自动在每个单元格中插入此字符,若不删除会撑大表格)。依葫芦画瓢,做好下半部分的圆角。

  ⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格,CellPad、CellSpace和Border属性值都为0,宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色,宽度为1像素,并打开源代码察看器,删除这两列中的字符” ”。到这,一个圆角表格就做好了,您可以在第二列中添加您想要的内容。(如图3)

单击在新窗口中浏览图片

方法二:利用VML技术

  用VML技术可以更容易地制作一个圆角表格,而且还有投影哦!

  ①修改<html>表识为<html xmlns:v>

②在<head>区域添加如下代码:
<style>〈br>v\:* {behavior: url(#default#VML);}〈br〉</style>

③在您要添加圆角表格的地方加入以下代码:<v:RoundRect style="position:relative;width:200;height:100px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:textbox style="font-size:12px">

这里输入表格中的内容
</v:textbox>
</v:RoundRect>

您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。

  这样,一个有投影的圆角表格就制作好了(如图4)。

单击在新窗口中浏览图片

  这种添加圆角表格的方法虽然很方便,但是它不能很好的适应每个浏览器版本,且在设计时是以层的方式现实,不利于版面设计,所以尽量使用第一种方法。