css常见小问题(自己遇到的)

2019-08-14 09:59:10来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

  • 禁止div点击
//css属性:
    pointer-events: none;   
    //或者定义属性,在js中添加:
    $(".原类名").addClass("新类名");  
//js:
    //禁用
    $.fn.disable = function () {
        $(this).addClass("disable");
    };
    //启用
    $.fn.enable = function () {
        $(this).removeClass("disable");
    };
    //或者
    $("#@id").disable();
    $("#@id").enable();
View Code
  • 鼠标放置显示“小手”手势,并显示提示文字
<div style="cursor:pointer;" title="提示的信息">这里是文字内容</div>
  • 超出区域的文字显示省略号
//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);
}
View Code
  • 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>
View Code
  • 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;  }
View Code
  • 设置元素在另一个元素的最底部
//设置父div的
position:relative;
//子div
position: absolute;
bottom:0;
View Code
  • 设置背景颜色,不透明度
background-color:#6d7a83;
opacity:0.75;
  • select文字对齐方式
//右对齐
select {
    direction: rtl;
}
//左对齐
select option {
    direction: ltr;
}
//居中对齐设置padding 
View Code
  • 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; } 
View Code
  • 修改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;
}
View Code
  • table中多个tr之间的间距
<tr style="display:block;margin-top:10px;"></tr>
  • 两个div之间加个竖线样式
<div style="margin-top: 20px;width:1px;height:80px;float:left;background:#e4e4e4;"></div>
  • textarea禁止拉伸
style="resize:none" 

 


原文链接:https://www.cnblogs.com/M-miao/p/11314908.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:博客园代码定制

下一篇:常见的移动端H5页面开发遇到的坑和解决办法