/*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;*/ }
代码比较繁多,真心请教
显示效果如图,我用的sublime,和这个没关系吧
我看了这段问题 ,都是这个问题 ,今天我给大家解答一下这个问题 。很简单
<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;
我看了别人的源码,发现正常的源码把后面做的去掉,其实显示效果和我的是一样的,下午我再接着做看看,但是老师讲课的时候却并不是这样,难道真的是编辑器的问题?