1、横向滚动条去除
demo：
<body style=”overflow-y:visible;overflow-x:hidden”>
代码解析：
竖向正常显示，横向溢出隐藏。
2、关于背景平铺（百分百显示）
demo：
.outer {width:100%;background:url() no-repeat center top;}
.core {width:1000px; margin:auto;}
代码解析：
双层div嵌套，外层div设置宽度百分百，no-repeat背景不重复，center背景图片的缩放基点在中间，top自上边往下显示；内层div设置固定宽度，margin自动【居中显示】。
3、position与z-index
demo：
层被遮盖，不能正常显示。
问题解析：
设置div的position和z-index。 详情：POSITION和Z-INDEX
4、去除超链接虚线边框
demo:
点击超链接后，出现虚线边框
代码解析：
IE浏览器：a {blr:expression(this.onFocus=this.blur());}
FF浏览器：a {outline: none;} 或者缩小范围： a:focus { outline: none; } 注：后者使得鼠标左键在链接上按下，松开之前的这段时间里，仍会显示虚线的outline.
5、加入收藏（简洁代码）
demo:
右上角：加入收藏
代码解析：
<a href=”http://www.baidu.com/” onclick=”window.external.addFavorite(this.href,this.title);return false;” title=’百度’ rel=”sidebar”>加入收藏</a>
6、div应用float溢出fatherdiv
demo:
Fdiv不设置高度，div应用float，内容溢出
解决方法：
增加Bdiv并应用clear：both清浮动或者给Fdiv设置高度。
7、CSS的缩写规则
①、color的缩写
demo：
#ff00ee->#f0e 简单缩写 注：#f0f0fe->#f0f0fe 不可以缩写
②、单位的缩写
数值为0，可以不写单位
demo：
margin：0px->margin：0
③、margin和padding的缩写
描述规则，顺时针上右下左
demo：
margin-left：15px；margin-right:20px;margin-top:30px;margin-buttom:10px;–>
margin：30px 20px 10px 15px； 上=30px、右=20px、下=10px、左=15px；
margin：30px；上=右=下=左=30px；
margin：30px 20px； 上=下=30px；左=右=20px；
margin：30px 10px 15px； 上=30px； 下=15px；左=右=10px；
注：上右下左顺时针不止适用于这里哦
④、border的缩写
规则：border：border-width border-style border-color
demo：
div {border-width：1px；border-style：solid；border-color：#f00；}/*边框宽度 边框样式 边框颜色*/
->div {border：1px solid #f00；}
border-top、border-right、border-buttom、border-left不可以缩写，但是可以：
div{ border-width：1px；/*边框四个方向的border宽度都为1px*/
border-style：solid dashed double；/*上方向边框：solid；下方向边框：dashed；左右方向边框：double；*/
border-color：#f00 #000； /*上下边框颜色为：#f00； 左右边框颜色：#00*/
}
1、改变选中文字的背景和颜色
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}
2、防止火狐滚动条跳动
3、分页打印
4、使用!important
5、图像替换文字
text-indent:-9999px;
background:url(‘someimage.jpg’) no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}
标注：text-indent:-9999px; 是将首行左缩进到人看不到的地方
6、兼容浏览器的最小高度
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}
7、对新窗口打开得链接高亮显示
a[target=”new”]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px “Zapf Dingbats”;
content: “\279C”;
}
8、美化li序列号
如图：
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
9、首字下沉
如图：
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}
10、兼容浏览器的opacity
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
11、使用line-height实现垂直居中
12、居中布局
width:1000px;
margin:0 auto;
}
13、移除ie文本域的垂直滚动条
overflow:auto;
}
14、移动超链接的虚线框
15、ie下元素消失，给该元素添加
16、根据链接不一样，添加不一样的icons
padding:0 20px 0 0;
background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}
17、css手型点击样式
18、字母大写
19、所有英文大写，且首字母比其他的大
20、高亮文本框，不支持ie
border:2px solid #000;
}
21、移除img边框
22、用label实现无表格表单
html CODE
<p><label for=”username” >Username</label>
<input type=”text” id=”username” name=”username” />
</p>
<p><label for=”password” >Username</label>
<input type=”password” id=”password” name=”pass” />
</p>
<p><input type=”submit” value=”Submit” /></p>
</form>
CSS Code
width:100px;
float:left;
margin-right:10px;
text-align:right;
}
