设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > Dreamweaver > 正文

dreamweaver表格设置圆角的2种方法

时间:2015-12-05 19:47:12 来源:互联网 作者:未知 阅读:153
导读:本文将向你介绍2种使用dreamweaver不用图片设置表格圆角的方法,第一种方法使用的是VML(Vector Markup Language矢量可标记语言)技术,可以很方便的制作出一个圆角表格,第二种方法是单纯的使用表格嵌套,通过设置边框和背景颜色来达到显示出圆角的目的。 1、...
    本文将向你介绍2种使用dreamweaver不用图片设置表格圆角的方法,第一种方法使用的是VML(Vector Markup Language矢量可标记语言)技术,可以很方便的制作出一个圆角表格,第二种方法是单纯的使用表格嵌套,通过设置边框和背景颜色来达到显示出圆角的目的。
1、使用VML技术制作圆角表格的源码:
<html xmlns:v>
<head>
<style>
     v:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:RoundRect style="position:relative;width:250;height:250px" strokeColor="red">
<v:shadow type="single" color="#565656" offset="5px,5px"/>
<v:textbox style="font-size:12px;color:blue">CSS实现真正的圆角表格</v:textbox>
</v:RoundRect>
</body>
</html>

以上代码在浏览器中运行后如下图所示:
使用VML技术实现的圆角表格预览图
需要注意的是VML技术IE5.0以上版本的浏览器才会支持,在写这篇文章的时候,我分别使用IE8、搜狗、猎豹、火狐这4种浏览器测试,只有IE8和搜狗才能正常显示,火狐和猎豹均显示空白(文字除外),其他浏览器没测试。
2、使用表格嵌套实现圆角样式,代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>圆角表格-村姑网</title>
</head>
<body>
<TABLE style="TABLE-LAYOUT: fixed" height=30 cellSpacing=0 cellPadding=0 width="33%" border=0>
<TBODY>
<TR height=3 width="100%"> 
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1> 
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD bgColor=#854256></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
</TR>
<TR height=1> 
<TD></TD>
<TD bgColor=#854256 colSpan=2></TD>
<TD bgColor=#f56sd3></TD>
<TD bgColor=#854256 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1> 
<TD></TD>
<TD bgColor=#854256></TD>
<TD bgColor=#f56sd3 colSpan=3></TD>
<TD bgColor=#854256></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR> 
<TD> <TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR> 
<TD width=1 bgColor=#854256></TD>
<TD id=oINNER bgColor=#f56sd3> </TD>
<TD width=1 bgColor=#854256></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR height=3 width="100%"> 
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1> 
<TD width=1></TD>
<TD width=1 bgColor=#854256></TD>
<TD width=1 bgColor=#f56sd3></TD>
<TD bgColor=#f56sd3></TD>
<TD width=1 bgColor=#f56sd3></TD>
<TD width=1 bgColor=#854256></TD>
<TD width=1></TD>
</TR>
<TR height=1> 
<TD></TD>
<TD bgColor=#854256 colSpan=2></TD>
<TD bgColor=#f56sd3></TD>
<TD bgColor=#854256 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1> 
<TD colSpan=3></TD>
<TD bgColor=#854256></TD>
<TD colSpan=3></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
以上代码直接保存为html文件在IE8和搜狗浏览器中运行如图所示:
表格嵌套实现圆角样式在IE8浏览器中的效果图
在火狐和猎豹浏览器中运行的图片如下:
 在狐火和猎豹浏览器中的效果图片
由上面的2个例子我们可以看出,不管是VML技术或者是使用表格实现圆角样式,在IE版本高于5.0的时候都能正常显示(现在最低基本都是6.0了),而使用猎豹和火狐浏览器均不能正常显示圆角表格。

《dreamweaver表格设置圆角的2种方法》地址:http://www.cunguer.com/article/204.html,本文来自村姑网,您身边的IT专家 www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!

推荐内容