Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer: 2016-06-24 11:50:58
original
1135 Les gens l'ont consulté

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

 

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)]><!-->
Copier après la connexion

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;}
Copier après la connexion

清浮动

.clearfix:after{height:0;display:block;content:".";visibility:hidden;clear:both;}.clearfix{zoom:1;}.clear{height:0;overflow:hidden;font-size:0;clear:both;}
Copier après la connexion

字体大小固定

div{-webkit-text-size-adjust:none;text-size-adjust:none;}
Copier après la connexion

悬挂定位

div{position:fixed;_position:absolute;top:100px;_top:expression(documentElement.scrollTop + 100 + "px");left:50px;}
Copier après la connexion

最大最小宽高度

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" : "");}
Copier après la connexion

背景透明图

div{background:url(../images/logo.png) no-repeat 50%;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png");}
Copier après la connexion

背景渐变

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);}
Copier après la connexion

灰阶

div{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);filter:grayscale(100%);filter:gray;}
Copier après la connexion

透明度

div{-webkit-opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;}
Copier après la connexion

阴影

div{-webkit-box-shadow:0 1px 0 #ccc;-moz-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;}
Copier après la connexion

动画旋转

div{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);}
Copier après la connexion

动画翻转

div{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);transform:scale(-1, 1);}
Copier après la connexion

动画位移

div{-webkit-transform:translate(50px,0);-moz-transform:translate(50px,0);transform:translate(50px,0);}
Copier après la connexion

动画持续时长

div{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;}
Copier après la connexion

盒模型边框

div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
Copier après la connexion

图片水平垂直居中

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;}
Copier après la connexion

三角形

div{width:0;height:0;border-bottom:10px solid #ccc;border-left:10px dotted transparent;border-right:10px dotted transparent;}
Copier après la connexion

英文字符换行

div{word-break:break-all;word-wrap:break-word;}
Copier après la connexion

文本字符不换行

div{white-space:nowrap;}
Copier après la connexion

文本字符超出隐藏

div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
Copier après la connexion

伪类选择器

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;}
Copier après la connexion

javascript

判断手机端类型

if(/android/i.test(navigator.userAgent)){    ...};if(/ipad|iphone|mac/i.test(navigator.userAgent)){    ...};
Copier après la connexion

窗口准备开始时

$(document).ready(function(){    ...});
Copier après la connexion

窗口滚动时

window.onscroll(function(){    ...};
Copier après la connexion

窗口改变大小时

window.onresize = function(){    ...};
Copier après la connexion

窗口加载完时

window.onload = function(){    ...};
Copier après la connexion

新窗口控制

window.open('http://www.goodid.com/','_blank','width=200,height=200,top=200,left=200);
Copier après la connexion

定时调用

setInterval(function(){    ...}, 1000);setTimeout(function(){    ...}, 1000);
Copier après la connexion

当前时间

var date = new Date();date.getTime();date.setTime();date.getFullYear();date.getMonth();date.getDate();date.getHours();date.getMinutes();date.getSeconds();
Copier après la connexion

创建元素

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);
Copier après la connexion

历史记录

history.back();
Copier après la connexion

跨域

document.domain = 'www.goodid.com';
Copier après la connexion

父窗口函数

window.parent.fn();
Copier après la connexion

临时存储

sessionStorage.setItem(key, value);sessionStorage.getItem(key);
Copier après la connexion

本地存储

localStorage.setItem(key, value);localStorage.getItem(key);
Copier après la connexion

 

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal