• 移动端初始化


    /**
     * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
     * http://cssreset.com
     */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video, input {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font-weight: normal;
        vertical-align: baseline;
    }
    
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, menu, nav, section {
        display: block;
    }
    
    body {
        line-height: 1;
    }
    
    blockquote, q {
        quotes: none;
    }
    
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /* custom */
    ol,ul ,li{list-style: none;}
    a{color:#666;text-decoration:none;}
    a{-webkit-tap-highlight-color: transparent;  -webkit-touch-callout: none;  -webkit-user-select: none;}
    img,input{border:0 none;}
    -webkit-text-size-adjust:none; 
    h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size:100%;}
    input,textarea{outline:none;}
    input:focus,textarea:focus,select:focus{outline:none;}
    :-moz-placeholder { 
        color: #c3c3c3;  
    }
    
    ::-moz-placeholder { 
        color: #c3c3c3; 
    }
    
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        color: #c3c3c3;  
    }
    
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #c3c3c3; 
    }
    ::-webkit-scrollbar {
         5px;
        height: 5px;
    }
    
    ::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb:vertical {
        height: 5px;
        background-color: rgba(125, 125, 125, 0.7);
        -webkit-border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb:horizontal {
         5px;
        background-color: rgba(125, 125, 125, 0.7);
        -webkit-border-radius: 6px;
    }
    /*移动端1个像素边框*/
    /*0.5像素边框*/
    .half-bd-top,
    .half-bd-bottom,
    .half-bd-left,
    .half-bd-right{
        position: relative;
    }
    .half-bd-top:after{
        content:"";
        position: absolute;
        top:0;
        left:0;
         100%;
        height: 1px;
        background-color: #000;
        -webkit-transform: scale(1,0.5);
        -ms-transform: scale(1,0.5);
        transform: scale(1,0.5);
    }
    .half-bd-bottom:after{
        content:"";
        position: absolute;
        bottom:0;
        left:0;
         100%;
        height: 1px;
        background-color: #000;
        -webkit-transform: scale(1,0.5);
        -ms-transform: scale(1,0.5);
        transform: scale(1,0.5);
    }
    .half-bd-left:after{
        content:"";
        position: absolute;
        top:0;
        left:0;
         1px;
        height: 100%;
        background-color: #000;
        -webkit-transform: scale(0.5,1);
        -ms-transform: scale(0.5,1);
        transform: scale(0.5,1);
    }
    .half-bd-right:after{
        content:"";
        position: absolute;
        top:0;
        right:0;
         1px;
        height: 100%;
        background-color: #000;
        -webkit-transform: scale(0.5,1);
        -ms-transform: scale(0.5,1);
        transform: scale(0.5,1);
    }
            
    .clearfix:after{
        content:"";
        display:block;
        height:0;
        clear:both;
        visibility: hidden
    }
    /*去除苹果浏览器的默认值*/
    /*IOS设备下默认圆角*/
    input[type="button"],input[type="date"],input[type="submit"],input[type="reset"],select,textarea{-webkit-appearance:none;
    border-radius:0;border:none;}
    body{ font-size:62.5%;font-family:"Microsoft yahei","微软雅黑",Arial,Helvetica,sans-serif,"宋体";background:#fff;color:#666;}
    /*1em=10px*/ html{/*解决默认tap事件点击的时候背景高亮问题*/-webkit-tap-highlight-color:transparent;} html, body { 100%; height:100%; position:relative; }
    日常所遇,随手而记。
  • 相关阅读:
    ckeditor(在线文本编辑器)使用教程
    一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
    正则表达式
    关于padding与margin的区别
    伪类link,hover,active,visited,focus的区别
    运动框架
    scroll、offset和client的区别
    如何给Sublime安装插件
    获取行间样式与在js中设置样式
    寻找下一个同级元素节点
  • 原文地址:https://www.cnblogs.com/zhihou/p/8375914.html
Copyright © 2020-2023  润新知