• css常用代码


    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>
  • 相关阅读:
    5+ App开发Native.js入门指南
    uni-app vue-cli命令行
    本地uni-app原生插件提交云端打包
    编写package.json文件
    生成插件包
    无障碍角色 accessibilityRole (iOS, Android)
    ajax 整理
    Javascript分享笔记
    echarts 横坐标分行展示,以及文字显示顶部
    js总结(11)js作用域
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14035352.html
Copyright © 2020-2023  润新知