css常用代码

转载

mb5fe18e5a55d8d 2020-11-25 12:29:00

文章标签 chrome firefox 类名省略号左对齐 文章分类 代码人生

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{
    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>
    <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之间的间距