仓酷云

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

[DIV+CSS] 来讲讲:CSS的expression判别表达式设置input款式

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

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

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

x
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
网页制造poluoluo文章简介:用CSS的expression判别表达式设置input款式,复杂,轻量级。弱点在于expression判别表达式FireFox是不撑持的。
  用CSS的expression判别表达式设置input款式,复杂,轻量级。弱点在于expression判别表达式FireFox是不撑持的。致命的是只能辨别出一个(比方例子中就只能辨别出text文本框),不要试图设置多个…

  代码:

<!doctypehtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.52CSS.com</title>
<metaname="Author"content="JustinYoung"/>
<metaname="Keywords"content=""/>
<metaname="Description"content=""/>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
input
{
background-color:expression(this.type=="text"?#FFC:);
}
</style>
</head>

<body>
<dl>
<dt>Thisisnormaltextbox:<dd><inputtype="text"name="">
<dt>Thisisnormalbutton:<dd><inputtype="button"value="imbutton">
</dl>
</body>
</html>
  另外一种办法:

input{
zoom:expression(function(ele){(ele.className)?ele.className+=""+ele.type:ele.className=ele.type;ele.style.zoom="1";}(this));
}
  1、将input的属性掏出来,赋给className。
  2、关于expression,这里利用一个可有可无的属性(此处是zoom)来触发,处置完必要做的事变以后,再将此属性掩盖失落以办理expression不休实行的效力成绩。

  代码:

<!--[ifltIE7]>

<styletype="text/css"media="screen">
input{
zoom:expression(function(ele){(ele.className)?ele.className+=""+ele.type:ele.className=ele.type;ele.style.zoom="1";}(this));
}
input.text{
border:1pxsolid;border-color:#CCC#EEE#EEE#CCC;
background:#F5F5F5;
}
input.password{
border:1pxsolid;border-color:#CCC#EEE#EEE#CCC;
color:#000;background:#F5F5F5;
width:50px;
}
input.button{
border:1pxsolid;border-color:#EEE#CCC#CCC#EEE;
color:#000;font-weight:bold;background:#F5F5F5;
}
input.reset{
border:1pxsolid;border-color:#EEE#CCC#CCC#EEE;
color:#666;background:#F5F5F5;
}
</style>
<![endif]-->

<styletype="text/css"media="all">
input[type="text"]{
border:1pxsolid;border-color:#CCC#EEE#EEE#CCC;
background:#F5F5F5;
}
input[type="password"]{
border:1pxsolid;border-color:#CCC#EEE#EEE#CCC;
color:#000;background:#F5F5F5;
width:50px;
}
input[type="button"]{
border:1pxsolid;border-color:#EEE#CCC#CCC#EEE;
color:#000;font-weight:bold;background:#F5F5F5;
}
input[type="reset"]{
border:1pxsolid;border-color:#EEE#CCC#CCC#EEE;
color:#666;background:#F5F5F5;
}
</style>
</head>
<body>
<inputtype="text"name="xx"/>
<inputtype="password"name="yy"/>
<inputtype="checkbox"name="oo"/>
<inputtype="radio"name="pp"/>
<inputtype="button"name="qq"value="button"/>
<inputtype="reset"name="oo"value="reset"/>
</body>
</html>
你用什么用的熟练就用什么,讲究的是效率,客户永远不管你用什么,页面就要好看,功能就要好用,还有时间和成本的问题。
精灵巫婆 该用户已被删除
沙发
发表于 2015-1-17 23:50:47 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
冷月葬花魂 该用户已被删除
板凳
发表于 2015-1-25 22:34:23 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
小魔女 该用户已被删除
地板
发表于 2015-2-4 12:46:09 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
小妖女 该用户已被删除
5#
发表于 2015-2-9 22:39:18 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
6#
发表于 2015-2-28 03:07:47 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
简单生活 该用户已被删除
7#
发表于 2015-3-9 20:17:13 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
飘飘悠悠 该用户已被删除
8#
发表于 2015-3-17 01:10:12 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
深爱那片海 该用户已被删除
9#
发表于 2015-3-23 15:32:34 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-4-30 01:50

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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