This article is only for personal use code collation, for their daily review
HTML Browser kernel
<!-- [If ie]><! [EndIf] - <!-- [If IE 6]><! [EndIf] - <!-- [If GTE IE 7]><! [EndIf] - <!-- [If LTE IE 7]><! [EndIf] - <!-- [if! ie]><! [EndIf] - <!-- [If! ( LTE IE 7)]><! -
Phone message Mail
<ahref= "tel:10086">Tel: 10086</a><ahref= "sms:10086">SMS: 10086</a><ahref= "weixin://addfriend/l670529375">: l670529375</a><ahref= "Mailto:[email protected]">e-mail: [Email protected]</a>
Csschrome scroll bar
::-webkit-scrollbar{width:10px;Height:10px;}::-webkit-scrollbar-track{background:#f9f9f9;}::-webkit-scrollbar-track:hover{background:#efefef;}::-webkit-scrollbar-thumb{Border-radius:4px;background:#aaa;}::-webkit-scrollbar-thumb:hover{background:#777;}::-webkit-scrollbar-thumb:active{background:#666;}
Clear float
. Clearfix:after{Height:0;Display:Block;content:".";Visibility:Hidden;Clear:both;}. Clearfix{Zoom:1;}. Clear{Height:0;Overflow:Hidden;font-size:0;Clear:both;}
Fixed font size
Div {-webkit-text-size-adjust:none; text-size-adjust:none;}
Suspension positioning
Div {position:fixed; _position:absolute; top:100px; _top:expression (documentelement.scrolltop + + + "px"); Left:50px;}
Maximum minimum width height
Div{Max-width:1280px;_width:expression (Documentelement.clientwidth > 1280?) "1280px": "Auto");}Div{Min-width:980px;_width:expression (Documentelement.clientwidth < 980?) "980px": "Auto");}Div{Min-height:800px;_height:expression ((Documentelement.clientheight | | document.body.clientHeight) > 800? "800px": "");}Div{Min-height:600px;_height:expression ((Documentelement.clientheight | | document.body.clientHeight) < 600? "600px": "");}
Background Transparency Chart
Div {background:url (.. /images/logo.png) no-repeat 50%; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= "). /images/logo.png ");}
Background gradient
Div {background:-webkit-linear-gradient (Top, #f9f9f9, #f1f1f1); background:-moz-linear-gradient (Top, #f9f9f9, #f1f1f1); filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #FFf9f9f9 ', endcolorstr= ' # Fff1f1f1 ', gradienttype=0); background:linear-gradient (to bottom, #f9f9f9, #f1f1f1);}
Gray Scale
Div {-webkit-filter:grayscale (100%); -moz-filter:grayscale (100%); Filter:grayscale (100%); Filter:Gray;}
Transparency
Div {-webkit-opacity:0.5; -moz-opacity:0.5; filter:Alpha (opacity=50); opacity:0.5;}
Shadow
Div {-webkit-box-shadow:0 1px 0 #ccc; -moz-box-shadow:0 1px 0 #ccc; Box-shadow:0 1px 0 #ccc;}
Animation rotation
Div {-webkit-transform:rotate (180deg); -moz-transform:rotate (180deg); transform:rotate (180deg);}
Animation Flip
Div {-webkit-transform: Scale( -1, 1); -moz-transform: Scale( -1, 1); transform: Scale( -1, 1);}
Animation displacement
Div {-webkit-transform:translate (50px,0); -moz-transform:translate (50px,0); transform:translate (50px,0);}
Duration of animation
Div {-webkit-transition: all0.5s; -moz-transition: all0.5s; transition: all0.5s;}
Box model border
Div {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
Horizontal Vertical center of picture
Div{width:800px;Height:800px;Display:Table-cell;text-align:Center;vertical-align:Middle;}Div I{position:Static;+position:Absolute;Top:50%;}div img{position:Static;+position:relative;Top:-50%; Left:-50%;vertical-align:Middle;}
Div {display:-webkit-box; -webkit-box-pack:Center; -webkit-box-align:center;}
Triangle
Div {width:0; height:0; border-bottom:10px solid #ccc; border-left:10px dotted transparent; border-right:10px dotted transparent;}
English character wrapping
Div {word-break:break-all; word-wrap:break-word;}
Text characters do not break line
Div {white-space:nowrap;}
Text characters beyond Hidden
Div {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
Pseudo class Selector
Div:first-child {color:#999;} Div:last-child {color:#999;} div:nth-child (2n) {color:#999;} div:nth-child (Odd) {color:#999;} Div:nth-child (even) {color:#999;}
JavaScript determines phone-side type
if (/android/i.test (navigator.useragent)) { ...}; if (/ipad|iphone|mac/i.test (navigator.useragent)) { ...};
Judging mobile users
varUA =navigator.userAgent.toLowerCase ();varIsipad = Ua.match (/ipad/i) = = ' ipad ';varIsiphoneos = Ua.match (/iphone os/i) = = ' iphone OS ';varISMIDP = Ua.match (/midp/i) = = ' MIDP ';varIsUc7 = Ua.match (/rv:1.2.3.4/i) = = ' rv:1.2.3.4 ';varISUC = Ua.match (/ucweb/i) = = ' UCWeb ';varIsandroid = Ua.match (/android/i) = = ' Android ';varIsce = Ua.match (/windows ce/i) = = ' Windows CE ';varISWM = Ua.match (/windows mobile/i) = = ' Windows Mobile ';if(Isipad | | isiphoneos | | ismidp | | isUc7 | | isuc | | isandroid | | isce | |iswm) {Location.href= ' ';};
When the window is ready to start
$ (document). Ready (function() { ...});
When the window scrolls
function (){ ...};
Window changes Large hours
function (){ ...};
When the window finishes loading
function (){ ...};
New Window Control
window.open (', ' _blank ', ' width=200,height=200,top=200,left=200 ');
Timed call
SetInterval (function() { ...}, 1); SetTimeout (function() { ...} , 1000);
Picture Loading status
var New = "; if (Img.complete) {};
function (){};
JS file load Status
var js = document.createelement (' script '= ';d ocument.getelementsbytagname (' head ') [0]. AppendChild (JS);
if (js.readystate) { function() { if(js.readystate = = ' Loaded ' | | Js.readystate = = ' complete ') {null; }; };} Else { function() { };};
Current time
var New Date ();d ate.gettime ();d ate.settime ();
Date.getfullyear ();d ate.getmonth ();d ate.getdate ();d ate.gethours ();d ate.getminutes ();d ate.getseconds ();
Creating elements
var img = document.createelement (' img '); img.src = '; img.width = 100px;img.height == ' block ';d ocument.body.appendChild (IMG);
Historical records
History.back ();
Document.referrer;
UserAgent
Navigator.useragent;
Cross-domain
document.domain = ' www ';
Parent window functions
Window.parent.fn ();
Temporary storage
Sessionstorage.setitem (key, value); Sessionstorage.getitem (key);
Local storage
Localstorage.setitem (key, value); Localstorage.getitem (key);
HTML, CSS, JavaScript handy notes