zoukankan      html  css  js  c++  java
  • CSS公共样式

    /*
         * @description: 公共样式表
        * @author: LMD同学
        * @update: LMD同学(2018-05-22 09:35)
    */
    @charset "utf-8";
    *{margin: 0px;padding: 0px;}
    body {background: #FFFFFF;color: #333;font-family: "微软雅黑";font-size: 14px;font-weight: lighter;}
    ul,li,ol,dl,dt,dd {list-style: none;}
    a {color: #333;text-decoration: none;cursor: pointer;outline: 0 none;}
    a:link,a:visited {text-decoration: none;color: #1F376D;}
    a:hover,a:active {text-decoration: none;color: #BD0A01;border: none;}
    button,input,select {vertical-align: middle;}
    button{cursor: pointer;}
    img {border: 0 none;}
    table{border-collapse:collapse;}
    .fl{float: left;}
    .fr{float: right;}
    .overflow-h {overflow: hidden;}
    .cl {clear: both;}
    .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .none {display: none}
    .block {display: block}
    .inline-block{display: inline-block}
    .t-l {text-align: left;}
    .t-c {text-align: center;}
    .t-r {text-align: right;}
    .vm {vertical-align: middle}
    .bg-red {background-color: #FB8B76;}
    .bg-red:hover{background-color: #FF2525;}
    .bg-yellow {background-color: #FCBA50;}
    .bg-yellow:hover{background-color: #FF2525;}
    .bg-blue {background-color: #3DC5D0;}
    .bg-blue:hover{background-color: #FF2525;}
    .bg-green{background-color: #82D745;}
    .bg-green:hover{background-color: #FF2525;}
    .bg-gray {background-color: #FDFDFE;}
    .bg-gray:hover{background-color: #FF2525;}
    .bg-pink{background-color: #EC6C8D;}
    .bg-pink:hover{background-color: #F24874;}
    .F12{font-size: 12px;}
    .F14{font-size: 14px;}
    .F16{font-size: 16px;}
    .F18{font-size: 18px;}
    .F20{font-size: 20px;}
    .color1{color: #333;}
    .color2{color: #666;}
    .color3{color: #999;}
    .FB{font-weight: bold;}
    .FN{font-weight: normal;}
    .FI{font-style: italic;}
    .upper{text-transform: uppercase;}
    .lower{text-transform: lowercase;}
    .w{100%}
    .h{height:100%}
    .h30 {height:30px;}
    .lh30 {line-height: 30px;}
    .btn{display: inline-block;padding:0px 16px;height:100%;border-radius:4px;cursor: pointer;}
    /*遮罩层*/
    .maskLayer{z-index: 9999;display: none;position: fixed;top: 0px;left: 0px; 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);}
    /*文字溢出*/
    .p-eclipse{
         100%;
        overflow: hidden;
        white-space:nowrap; 
        text-overflow:ellipsis; 
        -o-text-overflow:ellipsis;
        -moz-binding:url('ellipsis.xml#ellipsis'); 
    }
    .p-eclipse-2{
      overflow:hidden;
      text-overflow:ellipsis;
      word-break:break-all;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
    }
    .p-eclipse-3{
      overflow:hidden;
      text-overflow:ellipsis;
      word-break:break-all;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
    }
    /*页面顶部阴影*/
    .top-shadow:before {
        z-index: 100;
        content: "";
        position: fixed;
        top: -10px;
        left: 0;
         100%;
        height: 10px;
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        box-shadow: 0px 0px 10px rgba(0,0,0,.8);     
    }
    /***********************设置滚动条样式**************************/
    .scroll{overflow: scroll;}
    /*滚动条整体部分,
     * 其中的属性有width,height,background,border
     * (就和一个块级元素一样)等。
     * */
    .scroll::-webkit-scrollbar{
         12px;
        background-color: #eee;
    }
    /*外层轨道。
     * 可以用display:none让其不显示,
     * 也可以添加背景图片,颜色改变显示效果。
     * */
    .scroll::-webkit-scrollbar-track{
        background-color: #eee;
    }
    /*滚动条里面可以拖动的那部分*/ 
    .scroll::-webkit-scrollbar-thumb{
        border-radius: 10px;
        background: #3DB6A4;
    }
    /*滚动条两端的按钮。
     * 可以用display:none让其不显示,
     * 也可以添加背景图片,颜色改变显示效果。
     *  */
    .scroll::-webkit-scrollbar-button:start {
          background: url(./imgs/up.png) no-repeat; 
          background-size: 12px 12px; 
    }
    .scroll::-webkit-scrollbar-button:end{
        background: url(./imgs/down.png) no-repeat; 
          background-size: 12px 12px; 
    }
    /*内层轨道,滚动条中间部分(除去)。*/ 
    .scroll::-webkit-scrollbar-track-piece{
        
    };
    /*边角 */
    .scroll::-webkit-scrollbar-corner{
        
    };
    /*定义右下角拖动块的样式*/
    .scroll::-webkit-resizer{
        
    };
    /*****************************渐变背景颜色*********************/
    .bg-lr{
        /*火狐*/
        background:-moz-linear-gradient(left, #F68E06, #F45408);
        /*Safari5.1 Chrome 10+*/
        background:-webkit-linear-gradient(left, #F68E06, #F45408);
        /* Safari 4-5, Chrome 1-9*/
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));  
        /*Opera 11.10+*/
        background: -o-linear-gradient(left, #F68E06, #F45408);  
        /* IE 10 */
        background:-ms-linear-gradient(left, #F68E06, #F45408);
        /*IE 6 7 8*/
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)";    
        background:linear-gradient(left, #F68E06, #F45408);
        +background:#FA7002;
    }
    .bg-tb{
        /*火狐*/
        background:-moz-linear-gradient(top, #F68E06, #F45408);
        /*Safari5.1 Chrome 10+*/
        background:-webkit-linear-gradient(top, #F68E06, #F45408);
        /* Safari 4-5, Chrome 1-9*/
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F68E06), to(#F45408));  
        /*Opera 11.10+*/
        background: -o-linear-gradient(top, #F68E06, #F45408);  
        /* IE 10 */
        background:-ms-linear-gradient(top, #F68E06, #F45408);
        /*IE 6 7 8*/
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#F68E06, endColorstr=#F45408)";    
        background:linear-gradient(top, #F68E06, #F45408);
        +background:#FA7002;
    }
    /*****************************table表格样式**********************/
    /*奇数偶数行颜色不一样*/
    .inner-table tbody tr:nth-child(even){background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; 
     box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;}
    /*table 四周圆角形成*/
    .inner-table thead:first-child {-moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;border-radius: 6px 0 0 0;  }
    .inner-table thead:last-child {-moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;border-radius: 0 6px 0 0;}
    .inner-table thead:only-child{-moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;border-radius: 6px 6px 0 0;}
    .inner-table tfoot td:first-child {-moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;border-radius: 0 0 0 6px;}
    .inner-table tfoot td:last-child {-moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;border-radius: 0 0 6px 0;}
    .inner-table tfoot td:only-child{-moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6pxborder-radius: 0 0 6px 6px}
    /*鼠标悬浮改变table行的颜色*/    
    .inner-table tr:hover {background: #fbf8e9;-o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;     
    }
     
  • 相关阅读:
    html5 localstorage本地存储
    如何在源码里修改openwrt root密码
    openwrt-scripts/config/mconf: Syntax error: “(” unexpected错误解决
    HTML5获取地理位置信息
    Mysql 查看连接数,状态 最大并发数(赞)
    晨读笔记:CSS3选择器之属性选择器
    CSS3选择器之属性选择器
    js判断浏览器类型
    javascript json字符串与对象相互转换
    手机端html5触屏事件(touch事件)
  • 原文地址:https://www.cnblogs.com/liumengdie/p/9070531.html
Copyright © 2011-2022 走看看