前端CSS初始化

深藏阁楼爱情的钟 2024-04-17 22:15 11阅读 0赞

## 一、PC端初始化 ##

这里推荐使用淘宝官网的

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
    h1, h2, h3, h4, h5, h6{ font-size:100%; } 
    address, cite, dfn, em, var { font-style:normal; } 
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
    small{ font-size:12px; } 
    ul, ol { list-style:none; } 
    a { text-decoration:none; } 
    a:hover { text-decoration:underline; } 
    sup { vertical-align:text-top; } 
    sub{ vertical-align:text-bottom; } 
    legend { color:#000; } 
    fieldset, img { border:0; } 
    button, input, select, textarea { font-size:100%; } 
    table { border-collapse:collapse; border-spacing:0; }

二、移动端初始化

@charset "utf-8";
    
    /* 禁用iPhone中Safari的字号自动调整 */
    html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* 解决IOS默认滑动很卡的情况 */
    -webkit-overflow-scrolling : touch;
    }
    
    /* 禁止缩放表单 */
    input[type=“submit”], input[type=“reset”], input[type=“button”], input {
    resize: none;
    border: none;
    }
    
    /* 取消链接高亮 */
    body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    /* 设置HTML5元素为块 */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    }
    
    /* 图片自适应 */
    img {
    width: 100%;
    height: auto;
    width: auto\9; 
    display: block;
    -ms-interpolation-mode: bicubic;
    }
    
    /* 初始化 */
    body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
    }
    body {
    font: 12px/1.5 ‘Microsoft YaHei’,‘宋体’, Tahoma, Arial, sans-serif;
    color: #555;
    background-color: #F7F7F7;
    }
    em, i {
    font-style: normal;
    }
    ul,li{
    list-style-type: none;
    }
    strong {
    font-weight: normal;
    }
    .clearfix:after {
    content: “”;
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    }
    .clearfix {
    zoom: 1;
    }
    a {
    text-decoration: none;
    color: #969696;
    font-family: ‘Microsoft YaHei’, Tahoma, Arial, sans-serif;
    }
    a:hover {
    text-decoration: none;
    }
    ul, ol {
    list-style: none;
    }
    h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-family: ‘Microsoft YaHei’;
    }
    img {
    border: none;
    }
    input{
    font-family: ‘Microsoft YaHei’;
    }
    /*单行溢出*/
    .one-txt-cut{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    /*多行溢出 手机端使用*/
    .txt-cut{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    }
    /* 移动端点击a链接出现蓝色背景问题解决 */
    a:link,a:active,a:visited,a:hover {
    background: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    }
    .w50{
    width: 50%;
    }
    .w25{
    width: 25%;
    }
    .w20{
    width: 20%;
    }
    .w33{
    width: 33.333333%;
    }
    .fl{
    float: left;
    }
    .fr{
    float: right;
    }
    .db{
    display: block !important;
    }
    .dn{
    display: none;
    }

可以根据自己的需求进行适当的修改和调整。