css常见小问题(自己遇到的)
程序员文章站
2022-10-09 12:17:25
1.禁止div点击 //css属性: pointer-events: none; //或者定义属性,在js中添加: $(".原类名").addClass("新类名"); //js: //禁用 $.fn.disable = function () { $(this).addClass("disable ......
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 style="cursor:pointer;" 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{ 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>
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; }
11.table中多个tr之间的间距
<tr style="display:block;margin-top:10px;"></tr>
12.两个div之间加个竖线样式
<div style="margin-top: 20px;width:1px;height:80px;float:left;background:#e4e4e4;"></div>
上一篇: 汪星人狗狗惹人爱 狗能吃胡萝卜吗
下一篇: 代码调试console对象的花式玩法