css常用代码

更新日期: 2019-07-07阅读: 2k标签: 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{
    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;
}


11.table中多个tr之间的间距

<tr></tr>


12.两个div之间加个竖线样式

<div></div>

 

链接: https://www.fly63.com/article/detial/4557

css自动省略号...,通过css实现单行、多行文本溢出显示省略号

网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。

深入理解letter-spacing,word-spacing的对比区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。

整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

满屏div之css最容易中枪的二十条规则,你中枪了吗?一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!

如何编写轻量级 CSS 框架

我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。

精简CSS代码,提高代码的可读性和加载速度

定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。

css完美解决网页在iphoneX的头部刘海显示问题

css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海

css中 出现height为100%失效的原因及解决方案

我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。

CSS3 clip-path 用法介绍

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

CSS中可以和不可以继承的属性

这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!