zoukankan      html  css  js  c++  java
  • 移动端制作公共样式reset

    原文链接:http://caibaojian.com/mobile-web-app-fix.html

    写一个好的web app初始化样式很重要,以下为之前的flexible.js中项目的同个样式。

    
    原文链接:http://caibaojian.com/mobile-web-app-fix.html
    @charset"utf-8";
     
    html {
     
        color: #000;
     
        background: #fff;
     
        overflow-y: scroll;
     
        -webkit-text-size-adjust: 100%;
     
        -ms-text-size-adjust: 100%;
     
    }
     
    html * {
     
        outline:none;
     
        -webkit-text-size-adjust: none;
     
        -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
     
    }
     
    html, body {
     
        font-family: sans-serif;
     
    }
     
    /* 内外边距通常让各个浏览器样式的表现位置不同 */
     
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     
        margin: 0;
     
        padding: 0;
     
    }
     
    input, select, textarea {
     
        font-size: 100%;
     
    }
     
    /* 去掉各 Table cell 的边距并让其边重合 */
     
    table {
     
        border-collapse: collapse;
     
        border-spacing: 0;
     
    }
     
    /* 去除默认边框 */
     
    fieldset, img {
     
        border: 0;
     
    }
     
    /* 去掉 firefox 下此元素的边框 */
     
    abbr, acronym {
     
        border: 0;
     
        font-variant: normal;
     
    }
     
    /* 一致的 del 样式 */
     
    del {
     
        text-decoration: line-through;
     
    }
     
    address, caption, cite, code, dfn, em, th, var {
     
        font-style: normal;
     
        font-weight: 500;
     
    }
     
    /* 去掉列表前的标识, li 会继承 */
     
    ol, ul {
     
        list-style: none;
     
    }
     
    /* 对齐是排版最重要的因素, 别让什么都居中 */
     
    caption, th {
     
        text-align: left;
     
    }
     
    /* 来自 yahoo, 让标题都自定义, 适应多个系统应用 */
     
    h1, h2, h3, h4, h5, h6 {
     
        font-size: 100%;
     
        font-weight: 500;
     
    }
     
    q:before, q:after {
     
        content:'';
     
    }
     
    /* 统一上标和下标 */
     
    sub, sup {
     
        font-size: 75%;
     
        line-height: 0;
     
        position: relative;
     
        vertical-align: baseline;
     
    }
     
    sup {
     
        top: -0.5em;
     
    }
     
    sub {
     
        bottom: -0.25em;
     
    }
     
    /* 正常链接 未访问 */
     
    a:link {
     
    }
     
    /* 鼠标悬停 */
     
    a:hover {
     
        text-decoration: underline;
     
    }
     
    /* 默认不显示下划线,保持页面简洁 */
     
    ins, a {
     
        text-decoration: none;
     
    }
    
  • 相关阅读:
    电容的用法:去耦、旁路、滤波等
    成为出色工程师的十大要素
    常用三极管的区别 9012 9013 9014 9015 8550 8050
    照明的几个光学概念
    PCB元件封装
    为什么诈骗短信看上去那么弱智
    摄像·镜头
    LED家居照明
    光色的应用与照度范围
    PowerPCB(PADS)常见问题全集
  • 原文地址:https://www.cnblogs.com/sakura-sakura/p/6678186.html
Copyright © 2011-2022 走看看