/*基础设置*/ .container{ width:1190px; margin:0 auto; } /* region 顶部导航条 */ .top_bar{ height:30px; line-height:30px; background-color:#ECECEC; } /*左侧导航区*/ .nav_left{ font-size: 0; height: 30px; line-height: 30px; } .nav_left a,.nav_left span{ font-size: 12px; } .nav_left .welcome{ margin-right:28px; } .nav_left .login{ padding-right:10px; border-right: 1px solid; } .nav_left .register{ margin-left:10px; } /*右侧导航区*/ .nav_right .list{ margin:0 auto; height: 30px; line-height:30px; } .nav_right .list li{ float:left; } .nav_right .list li a{ font-size: 12px; padding:0 15px; } .nav_right .list li:first-child a{ padding-left:0; } .nav_right .list li:last-child a{ padding-right:0; } .nav_right .list li:not(:last-of-type)::after{ content: "|"; position: relative; width: 1px; } /* endregion 顶部导航条结束 */ /* region 头部区域 */ .header .header_logo{ height:120px; line-height: 120px; font-size:0; } .header .header_search form{ margin-top: 42px; font-size:0; } .header .header_search input{ width:508px; height:34px; border:1px solid #DD302D; } .header .header_search button{ width:80px; height:36px; background-color:#DD302D; vertical-align: top; background-image: url("../images/serch_icon.png"); background-repeat: no-repeat; background-position: center; } /* endregion 头部区域结束 */ /* region 主导航 */ .main_nav{ height:48px; border-bottom: 1px solid #DD302D; } .main_nav .all-type{ height:48px; width:190px; background-color:#DD302D; color: #fff; text-align: center; line-height: 48px; } .main_nav .main_nav_list li{ float:left; text-align:center; line-height:48px; margin:0 10px ; } .main_nav .main_nav_list li a:link,.main_nav .main_nav_list li a:visited{ color:#333333; font-weight:bold; } .main_nav .main_nav_list li a:hover{ color:red; } /* endregion 主导航结束 */ /* region 主要内容区 */ .main_content{ height:458px; margin-top: 10px; } .main_content .slide-nav{ background-color: #F4F4F4; height:458px; width: 190px; position: relative; } .main_content .slide-nav li{ font-size:0; height:28px; line-height:28px; padding-left: 16px; } .main_content .slide-nav li>a{ font-size:14px; font-weight: bold; color: #333333; } .main_content .slide-nav li>a:link,.main_content .slide-nav li>a:visited { color: #333333; } .main_content .slide-nav li>a:hover{ color:red; } .main_content .slide-nav li>a:not(:last-of-type)::after{ content: "/"; } .main_content .slide-nav li:hover{ background-color: #A9A9A9; } .main_content .slide-nav li:hover .second_menu{ display: block; } .main_content .slide-nav .second_menu{ height: 458px; width: 690px; background-color: white; position: absolute; left: 190px; top: 0; font-size: 0; padding:10px; display: none; } .main_content .slide-nav .second_menu dl{ height: 36px; width: 670px; } .main_content .slide-nav .second_menu dl dt{ font-size: 14px; float: left; width: 70px; margin: 0 10px; } .main_content .slide-nav .second_menu dl dt a:link,.main_content .slide-nav .second_menu dl dt a:visited{ color:#000000; font-weight: bold; } .main_content .slide-nav .second_menu dl dt a:hover{ color: red; } .main_content .slide-nav .second_menu dl dd{ font-size: 14px; float: left; margin:0 10px; height: 36px; } .main_content .slide-nav .second_menu dl dd a:link,.main_content .slide-nav .second_menu dl dd a:visited{ color:#666666; font-weight: bold; } .main_content .slide-nav .second_menu dl dd a:hover{ color:red; } .main_content .slide-nav .second_menu dl dd::before { content: "|"; position: relative; width:1px; right:10px; } .main_content .banner{ height:458px; width: 690px; margin: 0 10px; font-size: 0; } .main_content .slide-other{ height:458px; width: 290px; } .main_content .slide-other .slide-other_massage{ height:156px; width: 260px; margin-bottom: 10px; border: 1px solid #D9D9D9 ; padding:0 14px; } .main_content .slide-other .slide-other_massage .massage_title{ line-height: 38px; height: 38px; border-bottom: 1px solid #D9D9D9; margin-bottom: 2px; } .main_content .slide-other .slide-other_massage .massage_title span{ font-size: 14px; color: #000000; font-weight: bold; } .main_content .slide-other .slide-other_massage .massage_title a{ font-size: 12px; color: #999999; font-weight: bold; } .main_content .slide-other .slide-other_massage .massage_list dl{ list-style: none; } .main_content .slide-other .slide-other_massage .massage_list dd{ position: relative; font-size: 12px; color: #666666; height: 14px; line-height: 14px; padding: 6px 0; font-weight: bold; } .main_content .slide-other .slide-other_massage .massage_list dd::before{ content: "[特惠]"; padding-right: 5px; } .main_content .slide-other .slide-other_massage .massage_list dd a:link,.main_content .slide-other .slide-other_massage .massage_list dd a:visited{ color: #666666; font-weight: bold; } .main_content .slide-other .slide-other_massage .massage_list dd a:hover{ color:red; } .main_content .slide-other .slide-other-nav{ height:290px; width: 290px; padding:0 5px; } .main_content .slide-other .slide-other-nav dl dd{ height: 70px; width: 48px; float: left; margin: 17px 11px 0; text-align: center; } .main_content .slide-other dl dd .picture{ width: 48px; height: 48px; background-image: url("../images/精灵图-侧边功能.png"); } .main_content .slide-other dl:nth-child(1) dd:nth-child(2) .picture{ background-position: -48px 0; } .main_content .slide-other dl:nth-child(1) dd:nth-child(3) .picture{ background-position: -96px 0; } .main_content .slide-other dl:nth-child(1) dd:nth-child(4) .picture{ background-position: -144px 0; } .main_content .slide-other dl:nth-child(2) dd:nth-child(1) .picture{ background-position: 0 -48px; } .main_content .slide-other dl:nth-child(2) dd:nth-child(2) .picture{ background-position: -48px -48px; } .main_content .slide-other dl:nth-child(2) dd:nth-child(3) .picture{ background-position: -96px -48px; } .main_content .slide-other dl:nth-child(2) dd:nth-child(4) .picture{ background-position: -144px -48px; } .main_content .slide-other dl:nth-child(3) dd:nth-child(1) .picture{ background-position: 0 -96px; } .main_content .slide-other dl:nth-child(3) dd:nth-child(2) .picture{ background-position: -48px -96px; } .main_content .slide-other dl:nth-child(3) dd:nth-child(3) .picture{ background-position: -96px -96px; } .main_content .slide-other dl:nth-child(3) dd:nth-child(4) .picture{ background-position: -144px -96px; } /* endregion 主要内容区结束 */ /* region 秒杀 */ .seckill{ margin-top: 10px; font-size: 0; } .seckill a{ float: left; } .seckill a:not(:last-child){ margin-right: 11px; } /* endregion 秒杀结束 */ /* region 楼层 */ .floor .floor_nav{ margin-top:48px ; height:34px; border-bottom: 2px solid #DD302D; } .floor .floor_nav span{ line-height: 34px; height: 34px; font-size: 20px; color: #000000; font-weight: bold; } .floor .floor_nav dl dt{ float: left; color: #DD302D; height: 34px; line-height: 34px; } .floor .floor_nav dl dt a:link,.floor .floor_nav dl dt a:visited{ color:red; } .floor .floor_nav dl dt a:hover{ color: white; background-color: red; } .floor .floor_nav dl dd{ float: left; height: 34px; line-height: 34px; margin-left:20px ; } .floor .floor_nav dl dd:before{ content: "|"; width: 1px; position: relative; right: 10px; } .floor .floor_nav dl dd a:link,.floor .floor_nav dl dd a:visited { font-size: 16px; color: #666666; } .floor .floor_nav dl dd a:hover { color: red; } .floor .floor_info{ height:432px; } .floor .floor_info>div{ float: left; font-size: 0; } .floor .floor_info .item1{ width: 230px; height: 100%; font-size: 0; } .floor .floor_info .item1 dl{ height: 108px; width: 190px; margin: 20px 20px 0; font-size: 16px; } .floor .floor_info .item1 dt{ float: left; width: 90px; height: 22px; line-height: 22px; text-align: center; padding-bottom: 3px; border-bottom: 1px solid #D9D9D9; } .floor .floor_info .item1 dt a:link,.floor .floor_info .item1 dt a:visited { font-size: 16px; color: #666666; } .floor .floor_info .item1 dt a:hover{ color:red; } .floor .floor_info .item1 dt:nth-child(odd){ margin-right: 10px; } .floor .floor_info .item1 dt:nth-child(n+3){ margin-top: 14px; } .floor .floor_info .item1 img{ margin: 30px 18px; } .floor .floor_info .item2{ width: 340px; height: 100%; } .floor .floor_info .item3{ width: 206px; height: 100%; } .floor .floor_info .item3 img { width: 206px; height: 215px; } .floor .floor_info .item3 img{ border-bottom: 1px solid #D9D9D9; } .floor .floor_info .item4{ width: 206px; height: 100%; border-left: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2; } /* endregion 楼层结束 */ /* region 页脚 */ .footer{ margin-top: 48px; background: #483E3E; height: 1000px; overflow:hidden } .footer a:link,.footer a:visited{ font-size: 14px; color: #FFFFFF; font-weight: bold; } .footer a:hover{ color:red; } .footer .top_link{ margin-top: 48px; border-bottom: 1px solid #584D4D; padding-bottom:22px; } .footer .top_link div{ width: 190px; float: left; } .footer .top_link div:not(:last-child){ margin-right: 10px; } .footer .top_link div a{ display: block; height: 32px; line-height: 32px; } .footer .bottom_link{ margin-top: 47px; text-align: center; } .footer .bottom_link dl{ display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ margin-bottom: 10px; } .footer .bottom_link dl dd{ float: left; height: 18px; line-height: 18px; } .footer .bottom_link dl dd:not(:last-child):after{ content: "|"; margin: 0 26px; color: #D9D9D9; } /* endregion 页脚 */