zoukankan      html  css  js  c++  java
  • 常用css相关笔记

    最后一个css不加样式

    .nav-sort li:not(:last-child) {
        border-bottom:#3e3e3e 1px solid;
    }
    

    垂直居中

    vertical-align: middle;
    

    超出部分省略号 第一种方法,crome不兼容

    p{
    /**
    white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到
    标签为止;
    overflow:hidden;不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
    text-overflow:ellipsis;当文本对象溢出是显示...,当然也可是设置属性为clip不显示点点点;
    -o-text-overflow:为了兼容opera浏览器;
    */
    200px;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    white-space:nowrap;
    }
    div{
    /*文字超出高度不显示*/
    overflow:hidden;
    display:block;
    height:60px;
    100px;
    }
    

      第二种方法

    @-moz-documentc url-prefix(){
      p{
        position: relative; 
        line-height: 20px;
        max-height: 40px;//设置最大高度,加上overflowhidden,正好是两行,使超出部分隐藏
        overflow: hidden;
       }
       p::after{
        content: "..."; 
        position: absolute; 
        bottom: 0; 
        right: 0; 
        padding-left: 40px;//以上三个属性,可以后续调整,看要把...放在哪个位置
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(right, transparent, #fff 55%);
        background: -moz-linear-gradient(right, transparent, #fff 55%);
        background: linear-gradient(to right, transparent, #fff 55%);//背景色可写成渐变也可写成一样的颜色
      }
    }
    原理是自己写一个… 放在最后一行的末尾。
    https://blog.csdn.net/weixin_42453802/article/details/85166114
    

      a标签   无decoration   手势

     .integral  ul li a{
    text-decoration: none;
    cursor:pointer;
      }
    

      图片transform

    div img{  
        cursor: pointer;  
        transition: all 0.6s;  
          }  
    div img:hover{  
        transform: scale(1.4);  
        }
      
    
    transition: all 0.6s;  表示所有的属性变化在0.6s的时间段内完成。
    transform: scale(1.4);  表示在鼠标放到图片上的时候图片按比例放大1.4倍。
    

      

  • 相关阅读:
    c语言练习24——数列求和
    Excel 常用属性的一小部分
    常见问题一之拼接表格 js传递参数变量 Json接收值
    关于下拉列表HtmlDownlistFor的使用
    Quay 基础版安装和部署
    Prometheus使用blackbox_exporter监控端口及网站状态(七)
    在CentOS 8上安装PostgreSQL 13 | RHEL 8
    nfs配置以及No route to host解决
    LNMP分离安装
    Linux配置和管理设备映射多路径multipath
  • 原文地址:https://www.cnblogs.com/rong88/p/10818873.html
Copyright © 2011-2022 走看看