22个必须知道的css技巧
2013-05-13 21:35
639 查看
1、改变选中文字的背景和颜色
::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; }2、防止火狐滚动条跳动
html{ overflow-y:scroll; }3、分页打印
.page-break{ page-break-before:always; }4、使用!important
.page { background-color:blue !important; background-color:red;}5、图像替换文字
.header{ text-indent:-9999px; url('someimage.jpg' ) no-repeat; height: 100px; /*dimensions equal to image size*/ width:500px; }6、兼容浏览器的最小高度
#container{ 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="_blank"]:before, 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序列号::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::1
ol { font: italic 1em Georgia, Times, serif; color: #999999; } ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000; }9、首字下沉::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::2
p:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:3.0em; font-family:Georgia; }10、兼容浏览器的opacity
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }11、使用line-height实现垂直居中
line-height:30px;12、居中布局
body{ width:1000px; margin:0 auto; }13、移除ie文本域的垂直滚动条
textarea{ overflow:auto; }14、移动超链接的虚线框
a:active, a:focus{ outline:none; }15、ie下元素消失,给该元素添加
position:relative;16、根据链接不一样,添加不一样的icons
a[href$='.doc'] { padding:0 20px 0 0; transparent url(/graphics/icons/doc.gif) no-repeat center right; }17、css手型点击样式
input[type=submit],label,select,.pointer { cursor:pointer; }18、字母大写
text-transform: capitalize;19、所有英文大写,且首字母比其他的大
font-variant:small-caps;20、高亮文本框,不支持ie
input[type=text]:focus, input[type=password]:focus{ border:2px solid #000; }21、移除img边框
a img{ border:none; }22、用label实现无表格表单<form method="post" action="#" ><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>
p label{ width:100px; float:left; margin-right:10px; text-align:right; }
|
相关文章推荐
- 22个必须知道的css技巧
- 前端设计师必须知道的10个重要的CSS技巧
- 前端设计师必须知道的10个重要的CSS技巧
- 你必须知道的一些CSS经典技巧
- DIV+CSS必须考虑的浏览器兼容的技巧
- 10个你未必知道的CSS技巧
- 15 个必须知道的 Chrome 开发工具技巧
- [你必须知道的css系列]第一回:丰富的利器3:CSS选择符之属性选择符
- 你必须知道的简单的位操作技巧
- cakephp必须知道的21条技巧
- 10个你未必知道的CSS技巧
- 必须知道的20个位运算技巧
- 处理器之你必须知道的ARM的22个基本概念
- 总结的一些css实用技巧及必须得注意的事项:
- 程序员必须知道的SQLSERVER数据库优化技巧
- 前端开发必须知道的CSS
- 你应该知道的25个非常有用的CSS技巧
- 你需要知道的三个 CSS 技巧
- 你必须知道的10个提高Canvas性能技巧