/*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,和這個(gè)沒關(guān)系吧