#nav{ height: 35px; background: #EEEEEE; } .nav-center{ width: 1199px; height: 35px; /* background: #0f0; */ margin:0 auto; } .nav-left{ float: left; } .nav-right{ float: right; } /* .nav-left a,.nav-right a{ line-height: 35px; color:#888888 ; } */ .nav-center a{ line-height: 35px; color:#888888 ; } /* .nav-left .active,.nav-right .active{ color: #6F26BD ; } */ .nav-center .active{ color: #6F26BD ; } .nav-left-first{ margin-right: 25px; } .nav-center span{ color:#888888 ; line-height: 35px; } /* 头部开始 */ .header{ height: 151px; width:1199px; /* background: red; */ margin:0 auto; } .header-logo{ float: left; margin-top:44px; } .search-box{ float: left; margin-left:123px; margin-top:43px; width: 536px; height: 100px; /* background: #00f; */ } .cart-box{ float: left; } .header-search{ width: 536px; height: 44px; background: #6F26BD; border:2px solid #6F26BD; } .search-text{ width:474px; height:44px; border:none; float: left; /* 文本缩进 */ text-indent: 5px; } .search-btn{ width:62px; height:44px; border:none; float: left; background: #6F26BD; font-size: 16px; color: #fff; } .header-list{ margin-top:10px; } .header-list a{ color:#999999; margin-right: 25px; } .cart-box{ margin-top:55px; margin-left:52px; color:#959595 ; } .cart-box img{ /* 居中对齐 */ vertical-align: middle; } .menu-box{ height: 50px; width: 1199px; /* background: #f00; */ margin:0 auto; } .menu li{ float: left; width:145px; height: 50px; /* background: yellow; */ color: #606060 ; font-size: 14px; line-height: 50px; text-align: center; } .menu { margin-left:260px; } /* 子元素相对于父元素定位 把子元素设置为绝对定位 absolute 父元素设置为relative */ .menu li.active{ /* background: #6F26BD; */ position: relative; } .active img{ position: absolute; right: 34px; top: -9px; } .slide-box{ height: 546px; /* background: #f00; */ background: url(../images/bg.png) center 0; } .slide-center{ height: 546px; /* background: #0f0; */ position: relative; } .slide-menu{ width: 260px; height: 596px; /* background: purple; */ background: rgba(0,0,0,0.4); position: absolute; top:-50px; } .slide-menu-title{ height: 50px; line-height: 50px; background: #6F26BD ; text-align: center; color: #fff; font-size: 14px; font-weight: 400; } .slide-menu-list{ padding: 16px 7px 0 7px; /* background: #0f0; */ } .slide-list-left{ width:30px; float: left; text-align: center; /* background: #00f; */ padding-top:20px; } .slide-list-right{ width: 216px; /* background: #f00; */ float: left; border-bottom: 1px solid #fff; } .slide-right-title{ margin-top:17px; font-size: 16px; font-weight: 400; color:#fff; } .slide-right-list{ font-size: 13px; color: #fff; margin:10px 0 10px 0; } .group-box{ height: 408px; /* background: #f00; */ } .pindan{ width: 590px; /* background: #0f0; */ float: left; margin-top:41px; } .seckill{ width: 590px; /* background: #0f0; */ float: right; margin-top:41px; } .group-title{ border-bottom: 2px solid #6F26BD; } .group-title-txt{ width: 125px; height: 34px; line-height: 34px; background: #6F26BD; color: #fff; font-size: 14px; text-align: center; margin-bottom: 1px; } .group-list{ margin-top:19px; } .group-list li{ width: 186px; height: 311px; /* background: #f00; */ float: left; margin-right: 10px; } .content{ background: #F4F4F4; height: 800px; } .meirong-title{ font-size: 26px; color:#E74079 ; text-align: center; height: 80px; line-height: 80px; } .hot{ width: 118px; height: 476px; background: #f00; float: left; } .hufu{ width: 194px; height: 476px; background: #0f0; float: left; } .meirong-list{ width: 594px; height: 476px; background: #00f; float: left; } .hot-brand{ width: 292px; height: 476px; background: #E74079; float: left; }