1.禁止div点击
//css属性:
pointer-events: none;
//或者定义属性,在js中添加:
$(".原类名").addClass("新类名");
//js:
//禁用
$.fn.disable = function () {
$(this).addClass("disable");
};
//启用
$.fn.enable = function () {
$(this).removeClass("disable");
};
//或者
$("#@id").disable();
$("#@id").enable();
2.鼠标放置显示“小手”手势,并显示提示文字
<div title="提示的信息">这里是文字内容</div>
3.超出区域的文字显示省略号
//1.普通情况
display:inline-block; //这个看情况加
overflow:hidden; /*超出部分隐藏*/
white-space:nowrap; /*让文本强制在一行不换行*/
text-overflow:ellipsis;/*显示省略号来代表被修剪的文本*/
/*2.长的英文单词换行*/
word-break:break-all; /*支持IE,chrome,FF不支持*/
word-wrap:break-word;/*支持IE,chrome,FF*/
/*3.两行截取 2行超出显示...*/
.mui-ellipsis-2 {
display: -webkit-box;
overflow: hidden;
white-space: normal!important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/*4.select的情况下*/
<select onmouseover="selbox($(this))" ></select>
<script>
function selbox(a){
var val = a.val();
a.attr("title",val);
}
4.div+css控制图片等比例缩放:
/*外侧div设置宽、高,内侧图片设置宽、高为auto;并且设置max-width和max-height为同等比例*/
.imgbox50{
200px;
height:50px;
border-radius:50%;
text-align: center;
margin:0 auto;
}
.Img50{
max-85%;
max-height:85%;
border-radius:5px;
auto;
height:auto;
}
<div>
<img src="">
</div>
5.ui样式
第一个li的样式:li:first-child { background:#f00; }
最后一个li的样式:li:last-child { background:#000; }
第n个li的样式:li:nth-child(n) { background:#000; }
倒数第二个li的样式:nth-last-of-type(2){ background:#000; }
奇数列表:li:nth-child(odd) { background:#f00; }
偶数列表:li:nth-child(even) { background:#f00; }
6.设置元素在另一个元素的最底部
//设置父div的
position:relative;
//子div
position: absolute;
bottom:0;
7.设置背景颜色,不透明度
background-color:#6d7a83;
opacity:0.75;
8.select文字对齐方式
//右对齐
select {
direction: rtl;
}
//左对齐
select option {
direction: ltr;
}
//居中对齐设置padding
9.input设置提示文字的颜色
/* WebKit browsers */
input::-webkit-input-placeholder {color: red; }
/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder { color: red; }
/* Mozilla Firefox 19+ */
input::-moz-placeholder { color: red; }
/* Internet Explorer 10+ */
input:-ms-input-placeholder {color: red; }
10.修改select下拉按钮的样式是自定义的:
select::-ms-expand { display:none; }//隐藏自带的样式
select{
height:30px;
line-height:28px;
padding:0 16px 0 5px;
border:1px solid #e4e4e4;
background: url("/zbw/img/mobile/public/icon/sjxdown.png") right center no-repeat #fff;
background-size:16px;
text-align:left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
资源搜索网站大全 https://www.renrenfan.com.cn
11.table中多个tr之间的间距
<tr></tr>
12.两个div之间加个竖线样式
<div></div>