Home >Web Front-end >HTML Tutorial >html, css, javascript notes (continuously updated)_html/css_WEB-ITnose

html, css, javascript notes (continuously updated)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:50:581152browse

This article is only a compilation of commonly used personal codes for daily reference

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

css

chrome scrollbar

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

Hanging positioning

div{position:fixed;_position:absolute;top:100px;_top:expression(documentElement.scrollTop + 100 + "px");left:50px;}

Maximum minimum width and 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 transparent image

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

Grayscale

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

Animated rotation

div{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);}

Animated flip

div{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);transform:scale(-1, 1);}

Animated displacement

div{-webkit-transform:translate(50px,0);-moz-transform:translate(50px,0);transform:translate(50px,0);}

Animation duration

div{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}

Box model border

div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

The image is centered horizontally and vertically

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 characters wrap

div{word-break:break-all;word-wrap:break-word;}

Text characters do not wrap

div{white-space:nowrap;}

Text characters beyond hiding

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

Determine the mobile phone 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 is scrolling

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

When the window changes size

window.onresize = function(){    ...};

When the window finishes loading

window.onload = function(){    ...};

New window Control

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

Scheduled call

setInterval(function(){    ...}, 1000);setTimeout(function(){    ...}, 1000);

Current time

var date = new Date();date.getTime();date.setTime();date.getFullYear();date.getMonth();date.getDate();date.getHours();date.getMinutes();date.getSeconds();

Create element

var img = document.createElement('img');img.src = 'http://www.goodid.com/static/images/logo.png';img.width = 100px;img.height = 30px;img.style.display = 'block';document.body.appendChild(img);

History

history.back();

Cross domain

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

Parent window function

window.parent.fn();

Temporary storage

sessionStorage.setItem(key, value);sessionStorage.getItem(key);

Local storage

localStorage.setItem(key, value);localStorage.getItem(key);

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn