1、字体变形命令
.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;
}
<div>
<p>Vertical centering with line-height</p>
</div>
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;
}
Easy<a class="tooltip" href="#">Tooltip <span>This is a Example by imbolo.com.</span></a>
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图片背景问题
<!--[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;
}
17、文件域
<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 ’隶书’;
}
分享到:
相关推荐
一个使用js来添加css样式的小技巧,让您轻松掌握通过js来添加css的技术
在一些论坛里找到的一些小技巧,希望对大家有用哦…………………………………………
主要介绍如何CSS能使你的网页更加简炼以及使用CSS中的一些小经验.
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
CSS实用技巧及常见问题,一些平时没有注意的小技巧。了解它,对于以后制作页面会减少出错机会
微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉(颜色设为 transparent) .demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent ...
使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素…… CSS ...
3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样的DOCTYPE 4.2 名字空间 4.3 编码问题 4.4 meta ...
css 4.2.7中文手册给大家列举了一些CSS中的相关知识。比如:属性,选择符,语法与规则,取值与...另外,给大家总结了一些使用过程中,遇到的问题和解决办法,并且提供了一些简单的小技巧和经验,希望能为大家带来帮助。
不能不知道的CSS选择器技巧,CSS选择器使用技巧,你应该知道特分享给大家,感兴趣的小伙伴们可以参考一下
Dreamweaver教程的两个小技巧下面教大家一下,去除超级链接的下划线以及在超级链接上实现鼠标悬停变色与创建可反复使用的外部CSS样式表
今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。 使用好了,可以在很多实际场景得以运用。 我们先来看个例子,本例子是我在闲逛 Codepen 时看到了,很有意思: 本例子,CodePen: ...
CSS网页布局编码小技巧整理.不论是网站改版还是做新网站,都需要注意的一些地方。
HTML页面常用的一些小技巧,方法等,很实用,希望能帮到你。
里给大家介绍3个CSS中非常不错的小技巧,非常的简单实用,使用得当,可以大大降低我们的工作强度。
本文给大家推荐了29个常用的CSS小技巧,均是本人项目中使用过的,经过检测的代码,大家可以放心使用