.uppercaseInput{
text-transform: uppercase;
}
.lowercaseInput{
text-transform: lowercase;
}
.capitalInput{
text-transform: capitalize;
}
2、解决字体问题，宋体，英文的标准字体则是Arial和Helvetica等
font-family:Arial, Helvetica, sans-serif;
3、长文本，不换行
.longTxt{
overflow:hidden;
text-overflow:ellipsis;/**字符溢出,用省略号表示**/
-o-text-overflow:ellipsis;
white-space:nowrap;
text-align:left;
padding-left: 2px;
}
4、首字和首行（first-letter和first-line）伪类
p:first-letter {
font-size: 300%
}
div:first-line {
color: red
}
5、min-height最小高度的实现（兼容IE6、IE7、FF）
#main-container {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}
6、隐藏 Exploer textarea 的滚动条
textarea {
overflow:auto;
}
7、删除链接上的虚线框
a:active, a:focus {
outline:none;
}
8、用line-height实现垂直居中
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
Vertical centering with line-height
9、用过渡色做按钮背景色
input.PalegreenButton {
BORDER-RIGHT: #7EBF4F 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP:#7EBF4F 1px solid;
PADDING-LEFT: 2px;
FONT-SIZE: 12px;
FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#B3D997); /**滤镜**/
BORDER-LEFT: #7EBF4F 1px solid;
CURSOR: hand;
COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #7EBF4F 1px solid
}
10、纯CSS Tooltip
a:hover {
background:#ffffff; /*要兼容IE6的话必须添加背景色*/
text-decoration:none;}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:160px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
EasyTooltip This is a Example by imbolo.com.
11、CSS透明度
selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}
12、列表横排
li{
display:block;
float:left;
margin:0 10px;
}
13、IE在CSS中加事件处理
/**实数输入**/
.floatInput {
border:1px solid #000000;
event:expression(
onkeyup = function(){
this.style.borderColor='red';
this.value=this.value.replace(/[^\\d\\.]/g,'');/**不在范围内的清掉**/
}
)
}
/**表格奇偶行颜色**/
#myTable tbody tr {
line-height: 24px;
background-color:expression((this.sectionRowIndex%2==0)?"#F4F8FF":"#E6EFF7");
}
14、背景图片绝对居中
background:url(images/xx.gif) no-repeat 50% 50%; background:url(images/xx.gif) no-repeat center center;
background-position 属性设置背景图像的起始位置。第一个值是水平位置，第二个值是垂直位置。需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
15、cssText属性
var top= document.getElementById("top");
top.style.cssText="width:200px;height:70px;display:bolck";
16、解决IE6中PNG图片背景问题
input.NormalButton{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../images/btn_bg.png");
background:none;
}
17、文件域
input.FileInput{
border:1px solid #2D147E;
background:#eeeeee;
color:#2D147E;
font:bold 12px ’隶书’;
}