仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 662|回复: 7
打印 上一主题 下一主题

[DIV+CSS] CSS教程之制造优美圆角表格两种办法

[复制链接]
爱飞 该用户已被删除
跳转到指定楼层
#
发表于 2015-1-16 00:18:54 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
如果单独使用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或者是火狐,您的网站都能很好的兼容。
莫相离 该用户已被删除
7#
发表于 2015-3-21 00:29:16 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
深爱那片海 该用户已被删除
6#
发表于 2015-3-7 00:24:15 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
精灵巫婆 该用户已被删除
5#
发表于 2015-2-22 03:47:00 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
小妖女 该用户已被删除
地板
发表于 2015-2-7 12:35:40 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
兰色精灵 该用户已被删除
板凳
发表于 2015-2-1 17:04:10 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
若天明 该用户已被删除
沙发
发表于 2015-1-24 14:00:05 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
简单生活 该用户已被删除
楼主
发表于 2015-1-18 06:03:13 | 只看该作者
直接用代码建立链接,如:可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 08:57

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表