.header{ position: fixed; left: 0; top: 0; width: 100%; z-index: 9998; background-color: #f9f9f9; } .header_top{ display: flex; align-items: center; justify-content: space-around; position: relative; left: 0; right: 0; width: 100%; height: 42px; } .header_top .leftimg{ height: 14px; width: 64px; } .header_top input{ width: 200px; height: 33px; border: none; border-radius: 20px; background-color: rgba(155,155,155,0.1); background-image: url("../img/icon_search.png"); background-repeat: no-repeat; background-position: 10px; background-size: 14px; padding-left: 35px; box-sizing: border-box; } .header_top .rightimg{ margin-left: 5px; height: 25px; width: 25px; } .header_top span{ margin-right: 5px; font-size: 14px; } .header_bottom{ width: 100%; overflow-x: scroll; } .header_bottom ul{ width: 138%; height: 36px; display: flex; align-items: center; justify-content: space-around; font-size: 14px; color: #777777; } .header_bottom li:first-child{ border-bottom: 1px solid red; color: red; } .headerbottom_zz{ position: absolute; bottom: 0; right: 0; background-image: url("../img/more_down.png"); background-size: 10px; background-repeat: no-repeat; background-position: center; background-color: rgb(255, 255, 255); height: 36px; width: 36px; } .menu{ display: none; position: absolute; width: 100%; height: 144px; top: 42px; z-index: 9999; background-color: #f9f9f9; } .menu h3{ height: 31px; font-size: 15px; color: #777; margin-left: 16px; } .menu ul{ margin-top: 13px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } .menu ul li{ text-align: center; width: 33.333%; height: 48px; border-radius: 20px; border: 1 solid #777; } .menu ul li p{ height: 32px; width: 104px; line-height: 32px; border-radius: 70px; margin: 0 auto; border: 1px solid #eaeaea; } .menu ul li:first-child p{ border: 1px solid red; } .headerbottom_zz:hover .menu{ display: block; } .content{ width: 100%; margin-top: 78px; margin-bottom: 52px; } .WheelPlanting{ position: relative; padding-top: 4px; width: 100%; height: 153px; background-color: #f9f9f9; } .dynamic{ display: flex; height: 100%; overflow: hidden; } .dynamic li{ padding: 0 6px; } .dynamic li img{ border-radius: 10px; height: 100%; } .dot{ position: absolute; width: 80px; height: 20px; display: flex; justify-content: space-around; right: 22px; bottom: 0px; } .dot li{ width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; } .dot li:first-child{ background-color: #fff; } .backpic_squared{ background-color: #f9f9f9; width: 100%; box-sizing: border-box; } .backpic_core{ height: 92px; width: 367px; margin: 0 auto; } .backpic_top{ border-top: 5px solid #f9f9f9; width: 100%; height: 20px; display: flex; align-items: center; justify-content: space-around; font-size: 11px; color: #777; } .icon-32{ font-size: 11px !important; color: #777; } .backpic_bottom{ margin-top: 15px; width: 100%; height: 53px; display: flex; align-items: center; justify-content: space-around; } .backpic_bottom li{ display: flex; align-items: center; justify-content: center; flex-direction: column; } .backpic_bottom li .img1{ height: 31px; width: 31px; background-image: url("../img/69b0eb135ed10c45aa8c2272e8e57493.png"); background-position-x: 0%; background-size: cover; } .backpic_bottom li .img2{ height: 31px; width: 31px; background-image: url("../img/69b0eb135ed10c45aa8c2272e8e57493.png"); background-position-x: 11.11%; background-size: cover; } .backpic_bottom li .img3{ height: 31px; width: 31px; background-image: url("../img/69b0eb135ed10c45aa8c2272e8e57493.png"); background-position-x: 22.22%; background-size: cover; } .backpic_bottom li .img4{ height: 31px; width: 31px; background-image: url("../img/69b0eb135ed10c45aa8c2272e8e57493.png"); background-position-x: 33.33%; background-size: cover; } .backpic_bottom li .img5{ height: 31px; width: 31px; background-image: url("../img/69b0eb135ed10c45aa8c2272e8e57493.png"); background-position-x: 44.44%; background-size: cover; } .backpic_bottom li span{ text-align: center; width: 65px; overflow: hidden; font-size: 12px; height: 16px; } .linone{ display: flex; align-items: center; justify-content: center; height: 10px; text-align: center; background-color: #f9f9f9; } .linone span{ height: 2px; width: 8px; margin: 0 2px; } .linone span:first-child{ background-color: #777777; } .linone span:last-child{ background-color: #e5e5e5; } .channel_headline{ background-color: #f9f9f9; } .ChannelHeadline_core{ position: relative; width: 338px; height: 42px; margin: 0 auto; display: flex; align-items: center; } .channel_lin{ width: 100%; height: 1px; position: absolute; top: 0; left: 0; background-color: #f1f1f1; } .ChannelHeadline_core h2{ font-size: 14px; color: #333333; } .ChannelHeadline_core .RollingTitle{ overflow: hidden; font-size: 12px; color: #4d4d4d; } .ChannelHeadline_core .dian{ height: 5px; width: 5px; border-radius: 50px; background-color: #c9c9c9; margin: 0 5px; } .ChannelHeadline_core .FootTitle{ font-size: 12px; color: #4d4d4d; margin-left: 94px; } .seckill{ width: 100%; height: 160px; background-color: #c7c7c741; display: flex; align-items: center; justify-content: center; flex-direction: column; } .seckill_core h3{ display: flex; align-items: center; justify-content: center; } .seckill_core .time1{ font-size: 14px; color: #4d4d4d; } .seckill_core .time2{ vertical-align: middle; width: 16px; height: 16px; margin: 0 5px; background-size: 100% 100%; background-image: url("../img/seckill_title.png"); } .seckill_core .time3{ font-size: 16px; color: #4d4d4d; } .seckill_core .time4{ font-size: 12px; color: #9b9b9b; margin-left: 3px; } .seckill_bootm{ position: relative; width: 100%; overflow-x: scroll; margin-top: 10px; height: 110px; } .seckill_bootm .Slide{ width: 280%; overflow: hidden; display: flex; justify-content: space-around; } .seckill_bootm .Slide li{ width: 79px; height: 90px; border-radius: 15px; background-color: #fff; } .seckill_bootm .Slide li{ display: flex; align-items: center; justify-content: center; flex-direction: column; } .seckill_bootm .Slide li img{ width: 64px; height: 64px; } .seckill_bootm .Slide li p{ width: 68px; height: 18px; font-size: 9px; color: #999999; overflow: hidden; line-height: 18px; text-align: center; } .Slide_bottom{ position: absolute; display: flex; align-items: center; justify-content: center; bottom: 0; left: -11px; width: 280%; } .Slide_bottom li{ font-size: 9px; color: #ca141d; margin-right: 25px; } ::-webkit-scrollbar { width: 0px; height: 0px; } .ChannelAds{ background-color: #f9f9f9; } .ChannelAds_core{ width: 363px; margin: 0 auto; } .foot{ height: 52px; width: 100%; position: fixed; display: flex; bottom: 0; left: 0; z-index: 99999; background-color: #f9f9f9; } .foot li{ width: 20%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .foot li .ftimg{ width: 24px; height: 24px; } .foot li span{ color: #787878; font-size: 10px; margin-top: 3px; margin-bottom: 5px; } .foot li a{ color: #787878; width: 24px; height: 24px; }