根据input的type来控制css样式
<style type="text/css">
/*
根据input的type来控制css样式
*/
/*
1.用css的expression判断表达式
优点：简单，轻量级
缺点：expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉
input
{
background-color:expression(this.type=="text"?'#FFC':'#eee');
}
*/
/*
2.用css中的type选择器
优点：简单，明了，可以分区出各个input控件形态。
缺点：type选择器，IE6之前的对web标准支持的不太好的浏览器不能支持
input[type="text"]
{
background-color:aquamarine;
}
input[type="password"]
{
background-color:bisque;
}
input[type="submit"]
{
background-color:blueviolet;
}
input[type="reset"]
{
background-color:chocolate;
}
input[type="radio"]
{
background-color:darkcyan;
}
input[type="checkbox"]
{
background-color:dodgerblue;
}
input[type="button"]
{
background-color:purple;
}
*/
</style>
<script type="text/javascript">
/*
3.用javascript脚本实现
优点：可以分区出各个input控件形态。
缺点：技术牵扯面教广，因为用js后期处理，所以在js没有起作用之前，各个input还是原始状态较致命的是FireFox不支持
*/
function GetCss(obj)
{
var colorArr=new Array("aliceblue","antiquewhite","aqua","aquamarine","darkgreen","darkslateblue","magenta","sienna");
var tpArr=new Array("text","password","submit","reset","radio","checkbox","button","file");
for(var i=0;i<tpArr.length;i++)
{
if(obj.type==tpArr[i])
{
obj.style.backgroundColor=colorArr[i];
}
}
}
function CheckType()
{
var obj = document.getElementsByTagName("input");
for (var i=0;i<obj.length;i++)
{
GetCss(obj[i]);
}
}
</script>
<form>
<input type="text" />
<br>
<br>
&l
相关文档：
这些都是之前学习的时候总结的，现在把它们都上传上来：
DIV+CSS面试八个题是之前在哪个网站看到了，现在怎么也找不到了，索性自己留一份吧！
一、超链接访问过后hover样式就不出现的问题？
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A
二、IE6的双倍边距BUG
......
通常的我们在读取文章标题的时候，遇到字符过多，都是通过程序在SERVER端截取一定的字符数，然后添加...来实现标题长度截取的。其实我们也可以通过CSS来控制。
实列如下：
.title
{
width:200px;
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;
}
可用span或div� ......
内部样式表
内部样式表需要在网页的<head>部分定义，格式如下：
<head>
<style type="text/css">
/*符合CSS语法结构的CSS语句，例如*/
body { background-color: blue; }
</style>
</head>
行内样式表(内嵌样式表)
行内样式表直接在标签内部定义，使用style属性，写法如下：
......
ie6中div的高度自动设置，到了ie7和ie8就不行了，需要设置css
/*针对非IE*/
div:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*针对IE*/
div{zoom:1;} ......
强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}
源地址：http://www.iwms.net/n1919c40.aspx
......
