1、清除浮动 .clearfix:after {content: ".";clear: both;display: block;height: 0;overflow: hidden;visibility: hidden;} .clearfix{clear:both;z-index:1;} 2、更新的清除浮动 .clearfix:before, .container:after { content: ""; display: table; } .clearfix:after { clear: both; } 3、跨浏览器的透明度 .transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } 4、.一般媒体查询 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {} @media only screen and (min-width : 321px) {} @media only screen and (max-width : 320px) {} @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {} @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {} @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {} @media only screen and (min-width : 1224px) {} @media only screen and (min-width : 1824px) {} @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {} 5、自定义文本选择。 一些新式的浏览器会允许你定义页面中的高亮颜色 ::selection { background: #e2eae2; } ::-moz-selection { background: #e2eae2; } ::-webkit-selection { background: #e2eae2; } 6、a标签 表示所有状态下的连接 如 a{color:red} ① a:link: 未访问链接 ,如 a:link {color:blue} ② a:visited: 已访问链接 ,如 a:visited{color:blue} ③ a:active: 激活时(链接获得焦点时)链接的颜色 ,如 a:active{color:blue} ④ a:hover: 鼠标移到链接上时 ,如 a:hover {color:blue} 一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。 前三者分别对应body元素的link、vlink、alink这三个属性。 四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。 另外,a:active不能设置有无下划线(总是有的)。 对超链接下划线设置 使用代码"text-decoration" 语法: text-decoration : none || underline || blink || overline || line-through text-decoration参数: none : 无装饰 blink : 闪烁 underline : 下划线 line-through : 贯穿线 overline : 上划线 7、垂直居中内容 .container { min-height: 6.5em; display: table-cell; vertical-align: middle;} 8、@font-face模版 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } body { font-family: 'MyWebFont', Arial, sans-serif; } 9、段落首字母 p:first-letter{ display: block; margin: 5px 0 0 5px; float: left; color: #ff3366; font-size: 5.4em; font-family: Georgia, Times New Roman, serif; } 10、跨浏览器的最小高度 #container { min-height: 550px; height: auto !important; height: 550px; } 11、基于文件类型的链接样式 /* external links */ a[href^="http://"] { padding-right: 13px; background: url('external.gif') no-repeat center right; } /* emails */ a[href^="mailto:"] { padding-right: 20px; background: url('email.png') no-repeat center right; } /* pdfs */ a[href$=".pdf"] { padding-right: 18px; background: url('acrobat.png') no-repeat center right; } 12、强制可点击条目上显示手型光标 a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; } 13、网页顶端阴影 body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } 14、默认的 H1-H5 题头 h1,h2,h3,h4,h5{ color: #005a9c;} h1{font-size: 2.6em;line-height: 2.45em;} h2{font-size: 2.1em;line-height: 1.9em;} h3{font-size: 1.8em;line-height: 1.65em;} h4{font-size: 1.65em;line-height: 1.4em;} h5{font-size: 1.4em; line-height: 1.25em;} 15、 禁用移动Webkit高亮 body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 16、压缩的 CSS 字体属性 p { font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica; } 17、超出宽度内容省略号 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> <NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR> </DIV>