CSS教程之制造优美圆角表格两种办法
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。<Pstyle="TEXT-INDENT:2em">
做网页时分为了丑化网页，经常把表格边框的拐角处做成圆角，如许能够制止间接利用表格直角的僵硬，使得网页全体加倍美妙。上面就给人人先容两种制造圆角表格的经常使用的举措。
<P> 办法一：用图片制造圆角表格
<P> 这是最经常使用也是最通用的办法，它能很好地顺应各类扫瞄器和分歧分辩率，年夜部分网页都利用这类办法。
<P> ①先用Photoshop等作图软件绘制一个圆角矩形，再用“矩形选框工具”拔取左上交的圆角部分(如)，复制它。
②不要作废拔取，间接新建一副图象，Photoshop会依据拔取部分的高度、宽度主动设置新建图象的巨细。张贴后，保留为WEB所用格局便可。
③反复步骤②，分离用“程度翻转”工具和“垂直翻转”工具，保留别的三个偏向的圆角。(如)
④翻开网页制造软件，这里以Dreamweaver为例。拔出一个一行三列的表格，设置其CellPad、CellSpace和Border属性值都为0。在第一列拔出图片1.gif，第三列拔出图片3.gif，并设置单位格的高度和宽度与图片分歧。设置第二列的背景色彩为与圆角图片分歧的色彩，设置宽度为全部表格的宽度减往两个图片的宽度，并翻开源代码观察器，删除这列中的字符””(Dreamweaver会主动在每一个单位格中拔出此字符，若不删除会撑年夜表格)。依葫芦画瓢，做好下半部分的圆角。
<P> ⑤再已拔出的两个表格两头再拔出一个一行三列同宽的的表格，CellPad、CellSpace和Border属性值都为0，宽度为100%。设置第一列和第三列背景色彩为与圆角图片分歧的色彩，宽度为1像素，并翻开源代码观察器，删除这两列中的字符””。到这，一个圆角表格就做好了，您能够在第二列中增加您想要的内容。(如)
办法二：使用VML手艺
<P> 用VML手艺能够更简单地制造一个圆角表格，并且另有投影哦！
①修正＜html＞表识为＜htmlxmlns:v＞
②在＜head＞地区增加以下代码：
＜style＞〈br>v:*{behavior:url(#default#VML);}〈br〉＜/style＞
③在您要增加圆角表格的中央到场以下代码：＜v:RoundRectstyle="position:relative;width:200;height:100px"＞
＜v:shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"/＞
＜v:textboxstyle="font-size:12px"＞
这里输出表格中的内容
＜/v:textbox＞
＜/v:RoundRect＞
您能够在下面的代码中设置圆角表格的宽度、高度、投影色彩等。
如许，一个有投影的圆角表格就制造好了(如)。
这类增加圆角表格的办法固然很便利，可是它不克不及很好的顺应每一个扫瞄器版本，且在计划时是以层的体例实际，倒霉于版面计划，以是只管利用第一种办法。
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 直接用代码建立链接，如：可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
页:
[1]