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
Release: 2016-06-24 11:50:58
Original
1151 people have browsed it

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)]><!-->
Copy after login

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;}
Copy after login

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;}
Copy after login

Fixed font size

div{-webkit-text-size-adjust:none;text-size-adjust:none;}
Copy after login

Hanging positioning

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

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" : "");}
Copy after login

Background transparent image

div{background:url(../images/logo.png) no-repeat 50%;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png");}
Copy after login

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);}
Copy after login

Grayscale

div{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);filter:grayscale(100%);filter:gray;}
Copy after login

Transparency

div{-webkit-opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;}
Copy after login

Shadow

div{-webkit-box-shadow:0 1px 0 #ccc;-moz-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;}
Copy after login

Animated rotation

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

Animated flip

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

Animated displacement

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

Animation duration

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

Box model border

div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
Copy after login

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;}
Copy after login

Triangle

div{width:0;height:0;border-bottom:10px solid #ccc;border-left:10px dotted transparent;border-right:10px dotted transparent;}
Copy after login

English characters wrap

div{word-break:break-all;word-wrap:break-word;}
Copy after login

Text characters do not wrap

div{white-space:nowrap;}
Copy after login

Text characters beyond hiding

div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
Copy after login

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;}
Copy after login

javascript

Determine the mobile phone type

if(/android/i.test(navigator.userAgent)){    ...};if(/ipad|iphone|mac/i.test(navigator.userAgent)){    ...};
Copy after login

When the window is ready to start

$(document).ready(function(){    ...});
Copy after login

When the window is scrolling

window.onscroll(function(){    ...};
Copy after login

When the window changes size

window.onresize = function(){    ...};
Copy after login

When the window finishes loading

window.onload = function(){    ...};
Copy after login

New window Control

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

Scheduled call

setInterval(function(){    ...}, 1000);setTimeout(function(){    ...}, 1000);
Copy after login

Current time

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

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);
Copy after login

History

history.back();
Copy after login

Cross domain

document.domain = 'www.goodid.com';
Copy after login

Parent window function

window.parent.fn();
Copy after login

Temporary storage

sessionStorage.setItem(key, value);sessionStorage.getItem(key);
Copy after login

Local storage

localStorage.setItem(key, value);localStorage.getItem(key);
Copy after login

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template