仓酷云

标题: CSS教程之制造优美圆角表格两种办法 [打印本页]

作者: 爱飞 时间: 2015-1-16 00:18
标题: CSS教程之制造优美圆角表格两种办法
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
<Pstyle="TEXT-INDENT:2em">

做网页时分为了丑化网页，经常把表格边框的拐角处做成圆角，如许能够制止间接利用表格直角的僵硬，使得网页全体加倍美妙。上面就给人人先容两种制造圆角表格的经常使用的举措。
　　办法一：用图片制造圆角表格
　　这是最经常使用也是最通用的办法，它能很好地顺应各类扫瞄器和分歧分辩率，年夜部分网页都利用这类办法。
　　①先用Photoshop等作图软件绘制一个圆角矩形，再用“矩形选框工具”拔取左上交的圆角部分(如)，复制它。

　　②不要作废拔取，间接新建一副图象，Photoshop会依据拔取部分的高度、宽度主动设置新建图象的巨细。张贴后，保留为WEB所用格局便可。
　　③反复步骤②，分离用“程度翻转”工具和“垂直翻转”工具，保留别的三个偏向的圆角。(如)

④翻开网页制造软件，这里以Dreamweaver为例。拔出一个一行三列的表格，设置其CellPad、CellSpace和Border属性值都为0。在第一列拔出图片1.gif，第三列拔出图片3.gif，并设置单位格的高度和宽度与图片分歧。设置第二列的背景色彩为与圆角图片分歧的色彩，设置宽度为全部表格的宽度减往两个图片的宽度，并翻开源代码观察器，删除这列中的字符””(Dreamweaver会主动在每一个单位格中拔出此字符，若不删除会撑年夜表格)。依葫芦画瓢，做好下半部分的圆角。

　　⑤再已拔出的两个表格两头再拔出一个一行三列同宽的的表格，CellPad、CellSpace和Border属性值都为0，宽度为100%。设置第一列和第三列背景色彩为与圆角图片分歧的色彩，宽度为1像素，并翻开源代码观察器，删除这两列中的字符””。到这，一个圆角表格就做好了，您能够在第二列中增加您想要的内容。(如)

办法二：使用VML手艺

　　用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或者是火狐，您的网站都能很好的兼容。

作者: 简单生活 时间: 2015-1-18 06:03
直接用代码建立链接，如：可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 若天明 时间: 2015-1-24 14:00
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 兰色精灵 时间: 2015-2-1 17:04
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 小妖女 时间: 2015-2-7 12:35
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 精灵巫婆 时间: 2015-2-22 03:47
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 深爱那片海 时间: 2015-3-7 00:24
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 莫相离 时间: 2015-3-21 00:29
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

欢迎光临仓酷云 (http://ckuyun.com/)