/*简短css/js*/
cursor:hand /****控制鼠标形状,hand是手型/pointer也是手型/crosshair是十字型/help是问号 *****//***/
图片设置float文字紧跟图片。/***/
<a href=mailto:li.liu@cwre.com.cn >点击发送邮件/***/
if(window !=top){ top.location.href=location.href; }session过期,点击后跳转到首页,而非iframe框架中跳转。 /**响应式图片*/.img-responsive { display: inline-block; height: auto; max-width: 100%;}a标签的伪类顺序:l,v,h,a;link,visited,hover,active.(love,hate)
/***/
让body里面的div充斥整个屏幕。通过html,body,div宽高100%来解决/***/
addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外),true为capture方式(由外向里)。addEventListener(evt,function,false)
/***/给未知高度div或者图片垂直居中
li{ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; -webkit-backface-visibility:hidden;//解决图片动画闪动}li{ display:table-cell; vertical-align:middle;}/***/不建议给body使用absolute,会消耗内存
/***/
媒体查询<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />@media screen and (max-width:240px){
.box{width:200px;}
.title{color:red;}
}
/***/单行文本溢出省略
.inline{width:200px;
overflow:hidden;white-space: nowrap;text-overflow: ellipsis}/***/多行文本溢出省略
.twoline{width:200px;
overflow:hidden;text-overflow: ellipsis; -webkit-line-clamp: 3; line-clamp: 3;//display:-webkit-box;//work-break:break-all;//-webkit-box-orient: vertical-align}
table属性frame="void"井字效果
table {border-collapse: collapse;} td{border: 1px solid red;}
/***/点击隐藏点击显示
$(document).ready(function() { $(".a li").click(function(){ $(this).children("ul").toggle(); }); });
/***/
关于line-height和vertical-alignvertical-align只对行内元素有效。解决div中img图片的一行白线,设置display:block;
//img在div中垂直居中,注意格式写成换行div{line-height:240px;font-size:0}
img{vertical-align:middle;}<div><img src=""/></div>
/***/去掉微信中下方的工具条
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){
WeixinJSBridge.call('hideToolbar');});/***/去掉微信右上角的微信分享的竖条document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){
WeixinJSBridge.call('hideOptionMenu');});/***/去掉input框的获取焦点的边框
input{outline:none;}/***/去掉苹果手机中input等框内阴影
input,textarea{-webkit-appearance: none;-moz--appearance: none;}/***/去掉img的外边框img{border:none;}/***/去掉i标签中的斜体
i{font-style:normal;}
/***/创建3d特效
-wwbkit-perspective:800;//物体离屏幕的距离
-webkit-perspective-origin: 50% 50%;//视角 -webkit-transform-style:-webkit-preserve-3d; /***/文档节点相关知识nodenamne,nodevalue节点值,九种不同的节点类型,九个不同的值FF会把换行当做第二个节点,解决办法(通过nodetype==1判断,1是元素节点类型的值):// 获得下一个元素对象(nodeType=1)function $NE(e){ e = e.nextSibling; while (e && e.nodeType != 1){e = e.nextSibling;} return e;} /***/css3画三角形/*箭头向上*/.arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff;} /***/去掉行内元素之间换行产生的空白间隙,以及IE6,7下的(已经设置margin:0;padding:0;).span-wrap { font-size:0;/* 所有浏览器 */ *word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */ } /***/ 去掉a标签点击的时候的有个阴影a{-webkit-tap-highlight-color: transparent;}/***/关于position
relative:不脱离文档流,定位相对于原来文档流中的位置定位,相对bodym不影响下一个元素,但margin,padding会影响下一个元素absolute:脱离文档流,定位相对于祖先元素中的非static定位。如没有,相对于html定位。超出部分会产生滚动条。fixed:脱离文档流,相对窗口定位。不会产生滚动条。