仓酷云

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

[DIV+CSS] 带来一篇网页殊效:expression将JS、Css分离起来

[复制链接]
小女巫 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 07:39:52 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
 IE5及其今后版本撑持在CSS中利用expression,用来把CSS属性和Javascript表达式联系关系起来,这里的CSS属性能够是元素固有的属性,也能够是自界说属性。就是说CSS属性前面能够是一段Javascript表达式,CSS属性的值即是Javascript表达式盘算的了局。在表达式中能够间接援用元素本身的属性和办法,也能够利用其他扫瞄器工具。这个表达式就仿佛是在这个元素的一个成员函数中一样。  给元素固有属性赋值
  比方,你能够按照扫瞄器的巨细来安装一个元素的地位。
以下是援用片断:
#myDiv{
position:absolute;
width:100px;
height:100px;
left:expression(document.body.offsetWidth-110+"px");
top:expression(document.body.offsetHeight-110+"px");
background:red;
}
  给元素自界说属性赋值
  比方,打消页面上的链接虚线框。一般的做法是:
以下是援用片断:
<ahref="link1.htm"onfocus="this.blur()">link1</a>
<ahref="link2.htm"onfocus="this.blur()">link2</a>
<ahref="link3.htm"onfocus="this.blur()">link3</a>
  粗看也许还表现不出接纳expression的上风,但假如你的页面上有几十乃至上百个链接,这时候的你岂非还会机器式地Ctrl+C,Ctrl+V么,况且二者一对照,哪一个发生的冗余代码更多呢?
  接纳expression的做法以下:
以下是援用片断:
<styletype="text/css">
a{star:expression(onfocus=this.blur)}
</style>
<ahref="link1.htm">link1</a>
<ahref="link2.htm">link2</a>
<ahref="link3.htm">link3</a>
  申明:内里的star就是本人恣意界说的属性,你能够随本人喜欢别的界说,接着包括在expression()里的语句就是JS剧本,在自界说属性与expression之间可别忘了另有一个引号,由于本色仍是CSS,以是放在style标签内,而非script内。OK,如许就很简单地用一句话完成了页面中的链接虚线框的打消。不外你先别满意,假如触发的殊效是CSS的属性变更,那末出来的了局会跟你的本意有不同。比方你想随鼠标的移进移出而改动页面中的文本框色彩变动,你大概想固然的会以为应当写为
以下是援用片断:
<styletype="text/css">
input
{star:expression(onmou搜索引擎优化ver=this.style.backgroundColor="#FF0000";
onmou搜索引擎优化ut=this.style.backgroundColor="#FFFFFF")}
</style>
<styletype="text/css">
input{star:expression(onmou搜索引擎优化ver=this.style.backgroundColor="#FF0000";
onmou搜索引擎优化ut=this.style.backgroundColor="#FFFFFF")}
</style>
<inputtype="text">
<inputtype="text">
<inputtype="text">
  可了局倒是呈现剧本堕落,准确的写法应当把CSS款式的界说写进函数内,以下所示:
以下是援用片断:
<styletype="text/css">
input{star:expression(onmou搜索引擎优化ver=function()
{this.style.backgroundColor="#FF0000"},
onmou搜索引擎优化ut=function(){this.style.backgroundColor="#FFFFFF"})}
</style>
<inputtype="text">
<inputtype="text">
<inputtype="text">
  注重
  不长短常必要,一样平常不倡议利用expression,由于expression对扫瞄器资本请求对照高。
实例:使用css里expression来完成界面临象的批量把持
成绩申明:用过CSS款式我们就晓得,能够界说一批工具的class属性来指定统一个款式来一致界面.但怎样一致同范例的工具的事务?好比:界面有没有数个
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
深爱那片海 该用户已被删除
沙发
发表于 2015-1-18 06:46:16 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
再见西城 该用户已被删除
板凳
发表于 2015-1-26 23:18:29 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
admin 该用户已被删除
地板
发表于 2015-2-5 03:57:45 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
再现理想 该用户已被删除
5#
发表于 2015-2-11 04:51:24 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
灵魂腐蚀 该用户已被删除
6#
发表于 2015-3-1 22:02:06 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
莫相离 该用户已被删除
7#
发表于 2015-3-11 01:24:18 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
金色的骷髅 该用户已被删除
8#
发表于 2015-3-17 18:09:25 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
9#
发表于 2015-3-24 20:53:08 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-29 06:49

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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