当前位置：首页 -> 网页设计 -> HTML/CSS -> 制作精美圆角表格两种方法

制作精美圆角表格两种方法

时间： 2021-07-31 作者：daque

　　做网页功夫为了粉饰网页，往往把表格边框的拐弯处做出圆角，如许不妨制止径直运用表格直角的僵硬，使得网页完全越发场面。底下就给大师引见两种创造圆角表格的常用的方法。

　　本领一：用图片创造圆角表格

　　这是最常用也是最通用的本领，它能很好地符合百般欣赏器和各别辨别率，大局部网页都运用这种本领。

制作精美圆角表格两种方法图1

　　①先用photoshop等作图软硬件绘制一个圆角矩形，再用“矩形选框东西”采用左上交的圆角局部(如图1)，复制它。

　　②不要废除采用，径直兴建一副图像，photoshop会按照采用局部的莫大、宽窄机动树立兴建图像的巨细。剪贴后，生存为web所用方法即可。

　　③反复办法②，辨别用“程度翻转”东西和“笔直翻转”东西，生存其余三个目标的圆角。(如图2)

　　④翻开网页创造软硬件，这边以dreamweaver为例。插入一个一条龙三列的表格，树立其cellpad、cellspace和border属性值都为0。在第一列插入图片1.gif，第三列插入图片3.gif，并树立单位格的莫大和宽窄与图片普遍。树立第二列的后台脸色为与圆角图片普遍的脸色，树立宽窄为所有表格的宽窄减去两个图片的宽窄，并翻开源代码查看器，简略这列中的字符” ”(dreamweaver会机动在每个单位格中插入此字符，若不简略会撑大表格)。依笋瓜画瓢，做好下半局部的圆角。

　　⑤再已插入的两个表格中央再插入一个一条龙三列同宽的的表格，cellpad、cellspace和border属性值都为0，宽窄为100%。树立第一列和第三列后台脸色为与圆角图片普遍的脸色，宽窄为1像素，并翻开源代码查看器，简略这两列中的字符” ”。到这，一个圆角表格就做好了，您不妨在第二列中增添您想要的实质。(如图3)

　　本领二：运用vml本领

制作精美圆角表格两种方法图3

　　用vml本领不妨更简单地创造一个圆角表格，并且再有投影哦！

　　①窜改＜html＞表识为＜html xmlns:v＞

　　②在＜head＞地区增添如次代码：　　＜style＞〈br>v:* {behavior: url(#default#vml);}〈br〉＜/style＞

制作精美圆角表格两种方法图4

　　③在您要增添圆角表格的场合介入以次代码：＜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)。

　　这种增添圆角表格的本领固然很简单，然而它不许很好的符合每个欣赏器本子，且在安排时是以层的办法实际，倒霉于版面安排，以是尽管运用第一种本领。

制作精美圆角表格两种方法

相关推荐

推荐下载

热门阅览

最新排行