仓酷云

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

[DIV+CSS] 来讲讲:CSS属性中Display与Visibility的分歧

[复制链接]
跳转到指定楼层
楼主
发表于 2015-1-16 00:21:22 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
年夜多半人很简单将CSS属性display和visibility搅浑,它们看似没有甚么分歧,实在它们的不同倒是很年夜的。
visibility属性用来断定元素是显现仍是埋没,这用visibility="visible|hidden"来暗示,visible暗示显现,hidden暗示埋没。当visibility被设置为"hidden"的时分,元素固然被埋没了,但它仍旧占有它本来地点的地位。例:<scriptlanguage="JavaScript">
functiontoggleVisibility(me){
if(me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else{
me.style.visibility="hidden";
}
}
</script>

<divonclick="toggleVisibility(this)"style="position:relative">
第一行文本将会触发"hidden"和"visible"属性,注重第二行的变更。</div><div>由于visibility会保存元素的地位,以是第二行不会挪动.</div>
效果:

第一行文本将会触发"hidden"和"visible"属性,注重第二行的变更。由于visibility会保存元素的地位,以是第二行不会挪动.注重到,当元素被埋没以后,就不克不及再吸收到别的事务了,以是在第一段代码中,当其被设为"hidden"的时分,就不克不及再吸收呼应到事务了,因而也就没法经由过程鼠标点击第一段文本令其显现出来。另外一方面,display属性就有一点分歧了。visibility属性是埋没元素但坚持元素的浮动地位,而display实践上是设置元素的浮动特性。当display被设置为block(块)时,容器中一切的元素将会被看成一个独自的块,就像<div>元素一样,它会在谁人点被放进到页面中。(实践上你能够设置<span>的display:block,使其能够像<div>一样事情。将display设置为inline,将使其举动和元素inline一样---即便它是一般的块元素如<div>,它也将会被组分解像<span>那样的输入流。最初是display被设置:none,这时候元素实践上就从页面中被移走,它上面地点的元素就会被主动跟上添补。上面看我实例的代码和效果:
例:
<scriptlanguage="JavaScript">
functiontoggleDisplay(me){
if(me.style.display=="block"){
me.style.display="inline";
alert("文本如今是:inline.");
}
else{
if(me.style.display=="inline"){
me.style.display="none";
alert("文本如今是:none.3秒钟后主动从头显现。");
window.setTimeout("blueText.style.display=block;",3000,"JavaScript");
}
else{
me.style.display="block";
alert("文本如今是:block.");
}
}
}
</script>

<div>在<spanid="blueText"onclick="toggleDisplay(this)"
style="color:blue;position:relative;cursor:hand;">蓝色</span>笔墨上点击来检察效果.</div>
效果:

在蓝色笔墨上点击来检察效果.

每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。
愤怒的大鸟 该用户已被删除
沙发
发表于 2015-1-18 06:13:53 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
活着的死人 该用户已被删除
板凳
发表于 2015-2-2 21:50:30 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
莫相离 该用户已被删除
地板
发表于 2015-2-8 07:50:22 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
再现理想 该用户已被删除
5#
发表于 2015-2-25 04:01:28 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
第二个灵魂 该用户已被删除
6#
发表于 2015-3-7 17:08:50 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
谁可相欹 该用户已被删除
7#
发表于 2015-3-15 10:04:40 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
只想知道 该用户已被删除
8#
发表于 2015-3-22 01:09:25 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-29 23:25

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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