问答详情
源自:4-4 主体pannel结构

panel部分和footer部分重合且margin-top:200px,没有效果


/*index.css代码*/
.index-bannerr{
    position: relative;
    background: #b3b3b3;
}

.index-banner-bg{
    height: 570px;    
    overflow: hidden;
}
.index-banner-bg img{
    margin: 0 auto;
}
.index-banner-text{
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left: -388px;
}

.index-banner-text .text-logo{
    width: 776px;
    height: 117px;
    background: url("../images/index-banner-textlogo.png");
}
.index-banner-text .text-info{
    margin-top: 17px;
    text-align: center;
    color: #fff;
}

.index-banner-text .text-info .line{
    display: inline-block;
    width: 40px;
    border-top: 1px solid #fff;
    vertical-align: middle;
}

.index-banner-text .text-info .txt{
    margin: 0 26px;
}

/*菜单*/
.index-menu {
    position: relative;
    border-top: 4px solid #f34949;
}

.index-menu .menu-tips {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -78px;
    width: 156px;
    height: 75px;
    text-align: center;
    line-height: 65px;
    color: #fff;
    background: #f34949;
}

.index-menu .menu-tips:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 78px solid transparent;
    border-right: 78px solid transparent;
    border-bottom: 10px solid #fff;

}

.index-menu .menu-list {
     margin-top: 150px;
     color: #555;
     overflow: hidden;
}

.index-menu .menu-list ul {
    width: 1160px;

}
.index-menu .menu-item {
    float: left;
    width:520px;
    
    margin-right: 60px;
    margin-bottom: 56px;
}
.index-menu .menu-item .title, .index-menu .menu-item .line {
    float: left;
}
.index-menu .menu-item .price {
    float: right;
}
.index-menu .menu-item .title {
    width: 230px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
    color: #555555;    
}

.index-menu .menu-item .comment{
    margin-top: 4px;
    color: #b7b7b7;
    font-size: 12px;
}

.index-menu .menu-item .line{
    margin-top: 9px;
    width: 192px;
    border-top: 1px solid #e3e1e1;
}
.index-menu .menu-more-btn {
    margin: 0 auto;
    width: 114px;
    height: 32px;
    padding-left: 16px;
    border: 1px solid #d7d5d5;
    font-size: 14px;
    line-height: 32px;
    color: #b7b7b7;
}

.index-menu .menu-more-btn .icon{
    display: inline-block;
    width: 11px;
    height: 7px;
    margin-left: 10px;
    background: url("../images/index-menu-icon.png");
}

.index-panel {
    margin-top: 200px;
}



.index-panel-header h3{
    float: left;
    margin-right: 48px;
    font-size: 20px;
    color: #3b3b3b;
    font-weight: normal;
    
    
}

.index-panel-header .line {
    float: left;
    width: 200px;
    border-top: 1px solid #e5e3e3;
    margin-top: 7px;
}

.index-panel-header .btn-group{
    font-size: 0;
    float: right;
}
.index-panel-header .btn{
    display: inline-block; 
    margin-left: 11px;
    width: 9px;
    height: 9px;
    background: #dedede;
    border-radius: 50%;
}

.index-panel-header .active{
    background: #9b9b9b;    
}

.index-panel-body{
    margin-top: 75px;
}
/*common.css代码*/
.public-header{
    height: 110px;
}

.public-header .header-logo{
    float: left;
    margin-top: 40px;
    
}
.public-header .header-logo a{
    width: 182px;
    height: 54px;
    background: url("../images/index-header-logo.png");
}

.public-header .header-nav{
    float: right;
}
/* .header-navh和 .item之间要加空格*/
.public-header .header-nav .item{
    float:left;
    font-size: 14px;
    margin-top: 44px;
    margin-left: 50px;
    
  }
  .public-header .header-nav a{
      color: #3b3b3b;
  }

.public-container{
    position: relative;
    margin: 0 auto;
    
    width:1100px; 
}

.public-footer{
    height: 218px;
    padding-top: 100px;
    background: #3b3b3b;
}

.public-footer .footer-col{
    width: 230px;
    float: left;
    margin-right: 60px;
    font-size: 16px;
    color: #fff;
    line-height: 1.8;
}
.public-footer .footer-col:last-child{
    margin-right: 0; 
}
.public-footer .footer-logo{
    width: 182px;
    height: 55px;
    margin-top: -10px;
    background: url("../images/index-footer-logo.png");
}

.seperation{
    clear: both;
}
/*reset.css代码*/
body,div,dl,dt,ul,li,h1,h2,h3,h4,h5,h6,input,a,p,textarea{
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

ol,ul,li{
    list-style: none; 
}

a{
    text-decoration: none;
    display: block;
    color: #fff;
}

img{
    border: none;
    display: block;
}
.clearfloat{
    zoom:1;
}
.cleatfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;

/*    clear: both;
    content: '.';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;*/
}

代码比较繁多,真心请教http://static.mukewang.com/img/59afbf660001108e12350278.jpg

显示效果如图,我用的sublime,和这个没关系吧

提问者:阿非利加 2017-09-06 17:28

个回答

  • 兼容并包
    2017-12-25 11:15:27

    我看了这段问题 ,都是这个问题 ,今天我给大家解答一下这个问题 。很简单

    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    把这3个位置调成我发的这样即可。 不要问我是谁,我叫雷锋。

    原因是你common里面 有个mairgin:0 auto;覆盖了你之前的margin-top:200px;  


  • 阿非利加
    2017-09-07 11:42:47

    我看了别人的源码,发现正常的源码把后面做的去掉,其实显示效果和我的是一样的,下午我再接着做看看,但是老师讲课的时候却并不是这样,难道真的是编辑器的问题?