• 移动端布局要用到的东西


    1.多行文本溢出隐藏

    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;

    2.单行文本溢出隐藏

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    

    3.css reset

    @charset "utf-8";
    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,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
         100%;
        height: 100%;
    }
     
    html {
        font-family: 'sans-serif', "Microsoft YaHei", "微软雅黑", "Tahoma", "Helvetica";
        font-size: 10px;
     
        background: #fff;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }
     
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
     
    img {
        border: 0; max- 100%!important;
        vertical-align: middle;
    }
     
    address,
    caption,
    cite,
    code,
    dfn,
    i,
    em,
    strong,
    th,
    var {
        font-weight: normal;
        font-style: normal;
    }
     
    ol,
    ul {
        list-style: none;
    }
     
    a {
        text-decoration: none;
    }
     
    a:hover,
    a:focus {
        outline: none;
    }
     
    caption,
    th {
        text-align: left;
        font-weight: normal;
    }
     
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: normal;
        font-size: 100%;
    }
     
    q:before,
    q:after {
        content: ”;
    }
     
    abbr,
    acronym {
        border: 0;
    }
     
    button,
    input,
    optgroup,
    select,
    textarea {
        margin: 0;
        font: inherit;
        color: inherit;
    }
     
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }
     
    :before,
    :after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
     
    input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
     
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    nav,
    section,
    summary {
        display: block;
    }
     
    

      

  • 相关阅读:
    Supervisor
    JS操作JSON总结
    电脑连接海信电视 HDMI
    upupw nginx服务器 rewrite设置
    PHP实现远程图片下载
    web页面调用IOS的事件
    composer更新不成功,启用国内镜像网站的配置更改办法
    Oracle中的一连接语句
    Oracle 树操作(select…start with…connect by…prior)
    MyEclipse下Tomcat无法部署项目 finish按钮无法点击
  • 原文地址:https://www.cnblogs.com/zph666/p/10468617.html
Copyright © 2020-2023  润新知