博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
遇到过的小问题
阅读量:4348 次
发布时间:2019-06-07

本文共 3120 字,大约阅读时间需要 10 分钟。

/*简短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-align

vertical-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:脱离文档流,相对窗口定位。不会产生滚动条。

转载于:https://www.cnblogs.com/sisi2020/p/5075958.html

你可能感兴趣的文章
Linux基础命令:who和w
查看>>
Linux基础命令:netstat
查看>>
Linux基础命令:ln
查看>>
Linux基础命令:lsof
查看>>
Linux基础命令:more和less
查看>>
Linux基础命令:chattr和lsattr
查看>>
Linux基础命令:crontab
查看>>
linux基础命令:su和sudo
查看>>
Linux基础命令:dumpe2fs
查看>>
linux基础命令:at
查看>>
Linux基础命令:ps
查看>>
linux基础命令: mount
查看>>
Linux基础命令:rename,basename,dirname
查看>>
Linux基础命令:dd
查看>>
Linux内置命令
查看>>
Linux基础命令:kill
查看>>
Linux基础命令:ssh
查看>>
Linux基础命令:vmstat
查看>>
Linux基础命令:split
查看>>
linux基础命令:MD5sum
查看>>