html、css、javascript随手笔记(持续更新)_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:50:58
Original
1115 people have browsed it

本文仅为个人常用代码整理,供自己日常查阅

 

html

浏览器内核

<!--[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滚动条

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

清浮动

.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

字体大小固定

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

悬挂定位

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

最大最小宽高度

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

背景透明图

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

背景渐变

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

灰阶

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

透明度

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

阴影

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

动画旋转

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

动画翻转

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

动画位移

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

动画持续时长

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

盒模型边框

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

图片水平垂直居中

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

三角形

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

英文字符换行

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

文本字符不换行

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

文本字符超出隐藏

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

伪类选择器

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

判断手机端类型

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

窗口准备开始时

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

窗口滚动时

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

窗口改变大小时

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

窗口加载完时

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

新窗口控制

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

定时调用

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

当前时间

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

创建元素

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

跨域

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

父窗口函数

window.parent.fn();
Copy after login

临时存储

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

本地存储

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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!