HTML, CSS, JavaScript handy notes (continuous update)

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)]><!  -

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;}

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)) {    ...};

When the window is ready to start

$ (document). Ready (function() {    ...});

When the window scrolls

Window.onscroll (function() {    ...};

Window changes Large hours

function (){    ...};

When the window finishes loading

function (){    ...};

New Window Control

window.open (' http://www.goodid.com/', ' _blank ', ' width=200,height=200,top=200,left=200 ');

Timed call

SetInterval (function() {    ...}, 1); SetTimeout (function() {    ...} , 1000);

Current time

var New Date ();d ate.gettime ();d ate.settime ();d ate.getfullyear ();d ate.getmonth ();d ate.getdate ();d ate.gethours (); Date.getminutes ();d ate.getseconds ();

Creating elements

var img = document.createelement (' img '= ' http://www.goodid.com/static/images/logo.png '=  == ' block ';d ocument.body.appendChild (IMG);

Historical records

History.back ();

Cross-domain

Document.domain = ' www.goodid.com ';

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 (continuous update)