[b]1、字体变形命令[/b]
[b]2、解决字体问题,宋体,英文的标准字体则是Arial和Helvetica等[/b]
[b]3、长文本,不换行[/b]
[b]4、首字和首行(first-letter和first-line)伪类 [/b]
[b]5、min-height最小高度的实现(兼容IE6、IE7、FF) [/b]
[b]6、隐藏 Exploer textarea 的滚动条[/b]
[b]7、删除链接上的虚线框[/b]
[b]8、用line-height实现垂直居中[/b]
[b]9、用过渡色做按钮背景色[/b]
[b]10、纯CSS Tooltip[/b]
[b]11、CSS透明度[/b]
[b]12、列表横排[/b]
[b]13、IE在CSS中加事件处理[/b]
[b]14、背景图片绝对居中[/b]
[url=http://www.w3school.com.cn/css/pr_background-position.asp]background-position[/url] 属性设置背景图像的起始位置。第一个值是水平位置,第二个值是垂直位置。需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
[b]15、cssText属性[/b]
[b]16、解决IE6中PNG图片背景问题[/b]
[b]17、文件域[/b]
.uppercaseInput{
text-transform: uppercase;
}
.lowercaseInput{
text-transform: lowercase;
}
.capitalInput{
text-transform: capitalize;
}
[b]2、解决字体问题,宋体,英文的标准字体则是Arial和Helvetica等[/b]
font-family:Arial, Helvetica, sans-serif;
[b]3、长文本,不换行[/b]
.longTxt{
overflow:hidden;
text-overflow:ellipsis;/**字符溢出,用省略号表示**/
-o-text-overflow:ellipsis;
white-space:nowrap;
text-align:left;
padding-left: 2px;
}
[b]4、首字和首行(first-letter和first-line)伪类 [/b]
p:first-letter {
font-size: 300%
}
div:first-line {
color: red
}
[b]5、min-height最小高度的实现(兼容IE6、IE7、FF) [/b]
#main-container {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}
[b]6、隐藏 Exploer textarea 的滚动条[/b]
textarea {
overflow:auto;
}
[b]7、删除链接上的虚线框[/b]
a:active, a:focus {
outline:none;
}
[b]8、用line-height实现垂直居中[/b]
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
<div>
<p>Vertical centering with line-height</p>
</div>
[b]9、用过渡色做按钮背景色[/b]
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
}
[b]10、纯CSS Tooltip[/b]
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;
}
Easy<a class="tooltip" href="#">Tooltip <span>This is a Example by imbolo.com.</span></a>
[b]11、CSS透明度[/b]
selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}
[b]12、列表横排[/b]
li{
display:block;
float:left;
margin:0 10px;
}
[b]13、IE在CSS中加事件处理[/b]
/**实数输入**/
.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");
}
[b]14、背景图片绝对居中[/b]
background:url(images/xx.gif) no-repeat 50% 50%;
background:url(images/xx.gif) no-repeat center center;
[url=http://www.w3school.com.cn/css/pr_background-position.asp]background-position[/url] 属性设置背景图像的起始位置。第一个值是水平位置,第二个值是垂直位置。需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
[b]15、cssText属性[/b]
var top= document.getElementById("top");
top.style.cssText="width:200px;height:70px;display:bolck";
[b]16、解决IE6中PNG图片背景问题[/b]
<!--[if IE 6]>
<link href="../style/png_ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
input.NormalButton{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../images/btn_bg.png");
background:none;
}
[b]17、文件域[/b]
<input type="file" style="width:100%;cursor:hand;" onpropertychange="verifyAccept(this);" onkeydown="return false;" id="impFile" name="impFile" accept="txt,xls" class="FileInput" unselectable="on" contentEditable="false"/>
input.FileInput{
border:1px solid #2D147E;
background:#eeeeee;
color:#2D147E;
font:bold 12px ’隶书’;
}