- 禁止div点击
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//css属性: pointer-events: none; //或者定义属性,在js中添加: $(".原类名").addClass("新类名"); //js: //禁用 $.fn.disable = function () { $(this).addClass("disable"); }; //启用 $.fn.enable = function () { $(this).removeClass("disable"); }; //或者 $("#@id").disable(); $("#@id").enable();
- 鼠标放置显示“小手”手势,并显示提示文字
<div style="cursor:pointer;" title="提示的信息">这里是文字内容</div>
- 超出区域的文字显示省略号
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//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); }
- div+css控制图片等比例缩放:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*外侧div设置宽、高,内侧图片设置宽、高为auto;并且设置max-width和max-height为同等比例*/ .imgbox50{ width:200px; height:50px; border-radius:50%; text-align: center; margin:0 auto; } .Img50{ max-width:85%; max-height:85%; border-radius:5px; width:auto; height:auto; } <div class="imgbox50 mt5"> <img class="Img50" src=""> </div>
- ui样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
第一个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; }
- 设置元素在另一个元素的最底部
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//设置父div的
position:relative;
//子div
position: absolute;
bottom:0;
- 设置背景颜色,不透明度
background-color:#6d7a83;
opacity:0.75;
- select文字对齐方式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//右对齐 select { direction: rtl; } //左对齐 select option { direction: ltr; } //居中对齐设置padding
- input设置提示文字的颜色
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 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; }
- 修改select下拉按钮的样式是自定义的:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; }
- table中多个tr之间的间距
<tr style="display:block;margin-top:10px;"></tr>
- 两个div之间加个竖线样式
<div style="margin-top: 20px;1px;height:80px;float:left;background:#e4e4e4;"></div>
- textarea禁止拉伸
style="resize:none"