仓酷云

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

[DIV+CSS] DIV教程之border边框属性在扫瞄器中的衬着体例

[复制链接]
莫相离 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:21:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
网页制造poluoluo文章简介:剖析border边框属性在扫瞄器中的衬着体例首发小志博客,假如感到内容还不错而要转载的伴侣请不要吝惜http://blog.linxz.cn/这么一个URL,感谢!
剖析border边框属性在扫瞄器中的衬着体例首发小志博客,假如感到内容还不错而要转载的伴侣请不要吝惜http://blog.linxz.cn/这么一个URL,感谢!
针对border边框属性在扫瞄器中的衬着体例很早之前就入手下手在QQ群中看到人人在会商,而我也一向以border:0none;的体例处置。个中固然也是有我本人为何要做的缘故原由,关于这个缘故原由鄙人面的剖析中将会提到。在对border边框属性举行剖析之前,必要申明的几点内容是:

  • 小志我并非一个剖析专家,只是借助Firebug和IEdeveloper这两个工具在FF扫瞄器和IE扫瞄器中检察扫瞄器的衬着了局;
  • 由于只是检察了FF扫瞄器和IE扫瞄器的衬着了局,其实不能代表一切的扫瞄器都是不异的体例举行衬着。
为了能更好的对边框的款式举行对照,这里我们选用的是“按钮”元素,但利用的标签倒是分歧的,它们分离是input标签元素和button标签元素。顺带必要提到的一点就是,这两个标签元素在各个扫瞄器中的配合点是都属于体系控件元素,边框款式和按钮背景都是跟体系主题有着相对性的干系。
利用不异的XHTML布局代码,分离针对FF扫瞄器和IE扫瞄器举行对照。
<inputtype="button"value="按钮"/>
<hr/>
<button>按钮</button>


经由过程默许确当前体系主题的款式影响,我们发明IE扫瞄器在对button和input这两个标签元素的剖析上已是存在着一点细节上的分歧,但就今朝这个体系主题中所看到的页面体现效果是近乎于不异的,关于这点有乐趣的同砚能够自行实行一下。上列所看到的无任何CSS款式界说之前的属性了局中,我们失掉的了局是:
*FF扫瞄器:input标签和button标签的边框款式为border-width:3px;border-style:outset;border-color:#E5E5E5;
*IE扫瞄器:input标签边框款式为border-width:2px;border-style:outset;而button标签边框款式为border-width:2px;
有了这些数据以后,我们再看看当我们针对border边框属性界说了款式以后会是怎样的一个了局。

网页制造poluoluo文章简介:剖析border边框属性在扫瞄器中的衬着体例首发小志博客,假如感到内容还不错而要转载的伴侣请不要吝惜http://blog.linxz.cn/这么一个URL,感谢!

border:0;的衬着了局
起首我们来看看border:0;在FF扫瞄器和IE扫瞄器中的终极衬着了局。
input{border:0;}
button{border:0;}

这时候我们能够经由过程firebug(1.5.0版本)看到款式中所显现的代码是border:0none;而并非我们最后所设定的border:0;也就是说FF扫瞄器会将边框款式剖析为none(border-style:none;)。

经由过程firebug中“盘算出的款式”功效我们能够看到终极的边框款式中border-width为0,border-color为#000000,border-style为none。如今我们再看一下IE扫瞄器中的体现是怎样的。
在IE扫瞄器中我们使用的是IEDeveloperToolbar来检察扫瞄器的终极衬着了局,很分明的能够发明IE扫瞄器对border:0;的剖析时发生了一些偏向,仅仅只是衬着了border-width的属性,而关于input标签中的border-style属性持续坚持着原本的属性值outset,关于button标签中的border-style属性增添了outset属性值;border-color仍是为界说。这时候我们也能发明IE扫瞄器中input标签和button标签的边框已被界说为不异的属性。

此时FF扫瞄器和IE扫瞄器之间存在的差别是border-style和border-color两个属性。


网页制造poluoluo文章简介:剖析border边框属性在扫瞄器中的衬着体例首发小志博客,假如感到内容还不错而要转载的伴侣请不要吝惜http://blog.linxz.cn/这么一个URL,感谢!

border:none;的衬着了局
input{border:none;}
button{border:none;}
border:none;的边框界说体例,从狭义上了解,实在只是界说了border-style的属性值,关于这点我们也能够从firebug中的款式能够看到边框的款式界说已由本来的border:0none;改成border:mediumnone;了,改动的内容是border-width的款式界说。

但诡异的一点就是我们这里所看到的medium属性值却在firebug终极“盘算出的款式”里看不到。

更诡异的内容也要出来了,赶忙翻开IE扫瞄器看看是否是发明在页面中按钮的体现效果也纷歧样了?

两个扫瞄器的中按钮在界说了边框为border:none;时竟然会在扫瞄器中的体现体例都纷歧样了,这个是为何呢?

看了IEDeveloperToolbar中的了局后,总算分明了,本来这个时分IE扫瞄器仅仅只是衬着了border-style为none,而border-width仍然坚持原本的属性值,以是在才会与FF扫瞄器发生差别。

border:0none;的衬着了局
最初剩下的是border:0none;的边框款式界说体例,关于这个体例,经由下面的两个对照,信任人人能分明这个属性所界说的内容包括了甚么,把border-width和border-style同时界说为0和none值,让边框“无处躲身”,就算有色彩值也没用了。关于这个的衬着了局就不再像下面逐一排列了,感乐趣的同砚能够碰运气。
在停止之前再次保举人人在作废页面元素边框的时分,只管选择border:0none;制止呈现一些不用要的成绩。顺带提醒一下,在IEDeveloperToolbar中右下角的谁人复选框人人在测试的时分能够将其勾选,能够看到更多的默许款式值。
</p>
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
海妖 该用户已被删除
沙发
发表于 2015-1-17 22:06:57 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
莫相离 该用户已被删除
板凳
 楼主| 发表于 2015-1-24 16:00:08 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
admin 该用户已被删除
地板
发表于 2015-2-2 10:55:15 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
不帅 该用户已被删除
5#
发表于 2015-2-7 18:59:02 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
精灵巫婆 该用户已被删除
6#
发表于 2015-2-23 08:16:52 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
第二个灵魂 该用户已被删除
7#
发表于 2015-3-7 07:37:34 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
飘灵儿 该用户已被删除
8#
发表于 2015-3-14 18:06:37 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
柔情似水 该用户已被删除
9#
发表于 2015-3-21 14:50:38 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-9-28 09:07

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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