zoukankan      html  css  js  c++  java
  • 常用的css属性

     常用的css属性,总结如下:

     /*去掉textarea右下角的几个小点*/

    textarea{
      resize:none;
    }

     /*去掉input 文本框边框*/

    input[type="text"]:focus{

      outline:none;

    }

    /*表示表格的两边框合并为一条*/

    table{
      border-collapse:collapse;
    }

    /*P标签的text-indent:2em; 前面空两格*/
    p{
      text-indent:2em;
    }

    /*去掉标签默认的样式*/

     -webkit-appearance : none ;

    /*文本去掉下划线,添加下划线,文字中间添加横线,文本顶部添加横线*/

    text-decoration:none;blink;underline;line-through;overline;

    a标签的一些处理问题

    a:link:连接平常的状态
    a:visited:连接被访问过之后
    a:hover:鼠标放到连接上的时候
    a:active:连接被按下的时候
    /*css三角形*/
    div{
      0;
      height:0;
      border:20px solid red;
      border-color:transparent transparent transparent red;
    }
     /*html5中placeholder属性设置颜色*/
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: red;
    }
    input:-moz-placeholder, textarea:-moz-placeholder {
        color: red;
    }
    input::-moz-placeholder, textarea::-moz-placeholder {
        color: red;
    }
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        color: red;
    }
    /*input 文本框中   设置placeholder居中   的样式*/
    input::-ms-input-placeholder{text-align: center;}
    input::-webkit-input-placeholder{text-align: center;}
    input::-moz-input-placeholder{text-align: center;}
     
    /*使用position:absolute 设置水平,垂直居中*/
    position:absolute;
    left:50%; //left设置为50%,以元素的左侧进行的水平居中,设置left偏移量为50%。
    top:50%;//top设置为50%,以元素的上侧进行的垂直居中,设置top偏移量为50%。
    margin-top:-100px;
    margin-left:-100px;
    200px;
    height:200px;
    z-index:1;
    /*多行文本溢出时添加.....(仅仅对于webkit浏览器起作用)*/
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;//显示的行数
        -webkit-box-orient: vertical;
    /**
     * 为什么要清除浮动? 
     * 对于元素子类中存在的浮动元素,会对当前元素造成影响,无法撑起其元素的高度,影响页面布局效果
     * 清除浮动常用的几种方式:
     *  1.给父类元素直接设置height:100px 高度
     *     2.给父类元素添加伪元素 :after  例:div:after{content:'';display:block;clear:both;}
     *       3.在子类浮动元素的后面添加一个清除浮动的标签: <div style="clear:both;display:block;"></div>
     **/

    /*在使用display:inline-block的时候,会出现两个相邻元素之间出现间隔,清除的方法是给父级div加上font-size:0;*/

    /*css设置input标签为disabled的样式*/
    input:disabled{
        border1px solid #DDD;
       background-color#F5F5F5;
       color:#ACA899;
    }
    //IE8-
    input[disabled]{
       border1px solid #DDD;
       background-color#F5F5F5;
       color:#ACA899;
    }
    //IE6 Using Javascript to add CSS class "disabled"
    * html input.disabled{
       border1px solid #DDD;
       background-color#F5F5F5;
       color:#ACA899;
    }
    /*css3动画*/
    .test{
        opacity: 0;
        text-align:center;
        font-size:26px;
        -webkit-animation:animations2 5s ease-in-out 1s forwards;
        -moz-animation:animations2 5s ease-in-out 1s forwards;
        animation:animations2 5s ease-in-out 1s forwards;//动画名,动画执行时间,动画频率,动画延迟时间,动画循环次数(执行一次或者无线循环)
    }
     
    @-webkit-keyframes animations2{
        0%{opacity:0;}
        40%{opacity:.8;font-size: 26px;}
        45%{opacity:.3;font-size: 24px;}
        50%{opacity:.8;font-size: 20px;}
        55%{opacity:.3;font-size: 16px;}
        60%{opacity:.8;font-size: 14px;}
        100%{opacity:0;font-size: 12px;}
    }
    @-moz-keyframes animations2{
        0%{opacity:0;}
        40%{opacity:.8;font-size: 26px;}
        45%{opacity:.3;font-size: 24px;}
        50%{opacity:.8;font-size: 20px;}
        55%{opacity:.3;font-size: 16px;}
        60%{opacity:.8;font-size: 14px;}
        100%{opacity:0;font-size: 12px;}
    }
    @keyframes animations2{
        0%{opacity:0;}
        40%{opacity:.8;font-size: 26px;}
        45%{opacity:.3;font-size: 24px;}
        50%{opacity:.8;font-size: 20px;}
        55%{opacity:.3;font-size: 16px;}
        60%{opacity:.8;font-size: 14px;}
        100%{opacity:0;font-size: 12px;}
    }
     
    /*css3过渡动画*/
    .test{
      border-radius: 100px;
        -webkit-border-radius: 100;
        -webkit-appearance: none;
        -webkit-transition:transform .5s ease-in;
           -moz-transition:transform .5s ease-in;
                transition:transform .5s ease-in;//过渡动画时间 过渡动画频率
    }
    .test:hover{
      -webkit-transform: rotate(360deg);
                    trasform: rotate(360deg);
    }
    /*内容垂直居中*/
    .target{
       display: flex;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            flex-direction:column;
            justify-content:center;
           -webkit-box-pack: center;
           -webkit-justify-content: center;
           -ms-flex-pack: center;
            justify-content: center;
    }
    //默认去掉滚动条
    ::-webkit-scrollbar {
            0;
    }

     

  • 相关阅读:
    GitLab 介绍
    git 标签
    git 分支
    git 仓库 撤销提交 git reset and 查看本地历史操作 git reflog
    git 仓库 回退功能 git checkout
    python 并发编程 多进程 练习题
    git 命令 查看历史提交 git log
    git 命令 git diff 查看 Git 区域文件的具体改动
    POJ 2608
    POJ 2610
  • 原文地址:https://www.cnblogs.com/leijee/p/7417899.html
Copyright © 2011-2022 走看看