bootstrap.css与reset.css产生冲突

来源:2-1 使用HTML CSS实现侧边栏菜单布局

慕雪8696162

2017-02-21 22:09

很奔溃!!!!之前的reset都不能用了。。。为了这个sidebar

写回答 关注

1回答

  • 人木言若
    2017-02-23 20:33:06

    按顺序来引入css

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    @charset "UTF-8";
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
        margin: 0;
        padding: 0;
    }
    fieldset, img, input, button { 
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none; 
    }
    
    ul, ol {
        list-style: none; 
    }
    
    input {
        padding-top: 0;
        padding-bottom: 0;
        font-family: "SimSun", "宋体";
    }
    
    select, input {
        vertical-align: middle;
    }
    
    select, input, textarea {
        font-size: 12px;
        margin: 0;
    }
    
    textarea {
        resize: none;
    }
    
    
    img {
        border: 0;
        vertical-align: middle; 
    }
    
    
    table {
        border-collapse: collapse;
    }
    
    
    body {
        font: 12px/150% Arial, Verdana, "\5b8b\4f53";
        color: #666;
        background: #fff;
    }
    
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .clearfix {
        *zoom: 1; /*IE/7/6*/
    }
    
    a {
        color: #666;
        text-decoration: none;
    }
    
    a:hover {
        color: #C81623;
    }
    
    h1, h2, h3, h4, h5, h6 {
        text-decoration: none;
        font-weight: normal;
        font-size: 100%;
    }
    
    s, i, em {
        font-style: normal; 
        text-decoration: none;
    }
    
    .col-red {
        color: #C81623 !important; 
    }
    
    /*公共类*/
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .al {
        text-align: left;
    }
    
    .ac {
        text-align: center;
    }
    
    .ar {
        text-align: right;
    }
    
    .hide {
        display: none;
    }


侧边栏信息展示效果

顶级大牛分享开发经验,学会实现侧边栏内容效果展示,让你迅速进阶

33647 学习 · 96 问题

查看课程

相似问题

快速生成。

回答 2