Skip to content

Instantly share code, notes, and snippets.

@lgmcolin

lgmcolin/collector_1

Last active January 1, 2016 12:29
Show Gist options
  • Save lgmcolin/8145270 to your computer and use it in GitHub Desktop.
Save lgmcolin/8145270 to your computer and use it in GitHub Desktop.
Download ZIP
页面代码片段mark
Raw
collector_1
/**
* 1. 清除浮动
* 2. 固定Footer在页面底部的跨浏览器解决方案（2种方法实现）
* 3. css透明度opacity
* 4. @font-face语法
* 5. 浏览器hack
* 6. PNG32透明(IE6)
* 7. 让IE9以下的版本支持HTML5
* 8. 文本溢出省略
* 9. 线性渐变（兼容）
* 10.多列排列（html5）
* 11.Google Font API
* 12.text/image旋转（兼容）
* 13.webkit内核下拉条样式设置
*/
1.清除浮动
.clearfix:before,
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1; /* for IE6 IE7 */
}
2.固定Footer在页面底部的跨浏览器解决方案
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
< ![endif]-->
*/
补充（见到另外一种可以兼容）：
#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight :document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
3. CSS透明度
div{
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
}
4. @font-face语法
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
5. 浏览器hack
.all-IE { property:value\9; }
:root .IE-9 { property:value\0/; }
.gte-IE-8 { property:value\0; }
.lte-IE-7 { *property:value; }
.IE-7 { +property:value; }
.IE-6 { _property:value; }
.not-IE { property//:value;}
@-moz-document url-prefix () { .firefox { property:value; } }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit { property:value; } }
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .opera { property:value; } }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit { property:value; } }
/* IE 6 */
* html .yourclass { }
/* IE 7 */
*+html .yourclass{ }
/* IE 7 and modern browsers */
html>body .yourclass { }
/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }
/* Opera 9.27 and below */
html:first-child .yourclass { }
/* Safari */
html[xmlns*=""] body:last-child .yourclass { }
/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }
/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass { }
/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yourclass { }
}
6.PNG32透明(IE6)
.some_element {
background: url(image.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}
7.在js文件中加上下面这段
if (!+[1,]) {
(function() {
var tags = [
'article', 'aside', 'details', 'figcaption',
'figure', 'footer', 'header', 'hgroup',
'menu', 'nav', 'section', 'summary',
'time', 'mark', 'audio', 'video'],
i = 0, len = tags.length;
for (; i < len; i++) document.createElement(tags[i]);
})();
}
8.文本溢出省略
.textoverflow a {
display:block;
width:120px;
margin: 0px 0px 0px 3px;
white-space: nowrap;
overflow: hidden;
float: left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow: ellipsis; /* for IE */
}
.textoverflow:after{ content: "..."; }/* for Firefox */
@media all and (min-width: 0px){ .textoverflow:after{ content:""; }/* for Opera */ }
9.线性渐变
background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8?, endColorstr=’#D8D3C8?,GradientType=0 );
10.多列排列
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
11.Google Font API
<!-- Some special fonts -->In the <head>:
/* Single font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
/* Multiple font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard +TT|Droid+Sans"><!-- Some special fonts -->
In your CSS:
body {
font-family: 'Droid Serif', serif; font-size: 48px;
}
12.text/image旋转（兼容）
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* opera */
-o-transform: rotate(30deg);
13.webkit下拉条样式设置
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-track{background-color:black}
::-webkit-scrollbar-track-piece{background:#FFF}
::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}
::-webkit-scrollbar-corner{background-color:#535353}
::-webkit-scrollbar-resizer{background-color:#FF6E00}
14.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment