.header {} .header_menu { height: 36px; background: #2e2828; line-height: 33px; } .header_menu a{ color: #afafaf; font-size: 12px; } .left_menu li, .right_menu li { float: left; padding: 0 8px; position: relative; } .left_menu li::after, .right_menu li::after { content: ""; width: 1px; height: 10px; display: block; position: absolute; top: 14px; right: -1px; background: #414141; } .right_menu li:nth-child(5)::after, .right_menu li:nth-child(6)::after { width: 0; } .left_menu li:nth-child(7)::after{ width: 0; } .right_menu i{ font-size: 14px; } .car{padding: 0 12px 0 10px; background: #424242; } .icon-xiangshangjiantou{ padding-left: 3px; font-size: 12px !important; } .right_menu li:hover .icon-xiangshangjiantou{ display: inline-block; transform: rotate(180deg); } .gengduo{ position: absolute; width: 119px; padding: 6px 0 12px 0; text-align: center; line-height: 32px; right: -20px; background: #ffff; top: 36px; display:none; box-sizing: border-box; box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%); z-index: 9; } .gd:hover .gengduo{ display:block; } .kefu{ position: absolute; width: 84px; height: 88px; padding: 12px 18px; background: #ffff; box-sizing: border-box; right: -11px; top: 36px; display:none; z-index: 9; box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%); } .kf:hover .kefu{ display:block; } .daohang{ position: absolute; width: 893px; height: 210px; background: #ffff; box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%); border-radius: 8px 0 8px 8px; right: 0; top: 36px; z-index: 9; padding-top: 37px; padding-left: 49px; box-sizing: border-box; display:none; z-index: 9; } .icon_home { width: 50px; height: 50px; background: url("../img/img/icon-common.svg"); background-position: -202px 0; margin-right: 46px; } .drop_menu_item { float: left; width: 185.0px;} .drop_menu_item:first-child { width: auto !important; } .drop_menu_item a { display: inline-block; width: 40%; line-height: 0px; } .dh:hover .daohang{ display:block; } .zp{ width: 284x; position: absolute; background: #ffff; height: 300; box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%); right: 0; top: 36px; display:none; z-index: 9; } .att:hover .zp{ display:block; } .app{ padding: 20px 0 20px 0; width: 244px; height: auto; } .app img{ width: 90px; height: 90px; float: left; margin-right: 12px; } /*图标部分 */ .header_logo{ height: 41px; padding: 18px 0 15px 0; box-shadow: 0 0 46px rgb(0 0 0 / 3%); } .logo{/*图标 */ height: 36px; margin-right: 34px; } .menus img{/*第一个图片 */ height: 24px; margin-top: 9px; } .menus li{/*文字布局 */ float: left; margin-right: 24px; line-height: 41px; } .menus li a{/*超链接 */ font-size: 16px; color: #333; } .search{/*搜索条 */ position: relative; width: 238px; height: 28px; } .search input{ background: #f0f0f0; border: 1px solid #f0f0f0; border-radius: 15px; width: 100%; height: 100%; text-align: right; padding-right: 35px; box-sizing: border-box; } .search i{ position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; } .search_kuang{/*搜索历史框*/ width: 240px; height:300.8px ; background-color: #ffff; border-radius: 20px; box-shadow: 0 2px 36px 0 rgb(0 0 0 / 7%); display:none; z-index: 9; } .search input:focus +.search_kuang{ display: block;/*问题1 */ } .search_kuang p { float: left; font-size: 10px; margin-left: 10px; margin-top: 3px; } .search_kuang span{ float: right; margin-right: 5px; margin-top: 3px; font-size: 10px; } .search_kuang li{ clear: both; display: block; overflow: hidden; color: #333; height: 30px; line-height: 30px; margin-left: 10px; } .search_kuang .huaxian{ border-top: 1px solid #f2f2f5; } /* 主体部分*/ .banner{/*背景图*/ background:url(https://res.vmallres.com/pimages//pages/picImages/20956554622615565902.jpg); height:514px ; background-position: 50% 0px; border-bottom-left-radius: 191px 52px; border-bottom-right-radius: 191px 52px; } .banner_center{/*容器*/ height:100%; position: relative; } .banner_menu {/*按钮布局*/ position: absolute; left: 0; top: 18px; width: 200px; height: 440px; box-shadow: 0 0 28px rgb(0 0 0 / 8%); background: rgba(255,255,255,0.95); border-radius: 10px; } .banner_menu li { height: 40px; line-height: 40px; padding: 0 16px; box-sizing: border-box; position: relative; } .banner_menu li:first-child:hover { border-top-left-radius: 10px; border-top-right-radius: 10px; } .banner_menu li:last-child:hover { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .banner_menu li:hover { background: #fff; } .banner_menu li a{ float: left; font-size: 14px; color: #848484; } .banner_menu i{ float: right; font-size: 13px; color: #848484; } .drow_menu{ position: absolute; left: 192px; width: 274px; padding-left: 32px; padding-top: 20px; box-sizing: border-box; height: 440px; background: #fff; border-radius: 0 10px 10px 0; box-shadow: 0 0 46px rgb(0 0 0 / 10%); display: none; } .banner_menu li:hover .drow_menu{ display: block; } .list { padding-right: 20px; } .list .item { margin-bottom: 15px; height: 60px; padding: 8px 5px 0px 5px; border-radius: 10px; width: 230px; } .list .item:hover{ background-color: #f6f6f6; } .item img{ width: 48px; height: 48px; margin-right:8px; vertical-align: middle; } .show_all { width: 112px; height: 42px; position: relative; border: 1px solid #f2f2f2; border-radius: 0 22px 22px 0; font-size: 13px; color: #999; text-align: center; margin-left: 26px; margin-top: 24px; } .icon-bofang { position: absolute; display: inline-block; width: 42px; height: 42px; background: #fff; border: 1px solid #f2f2f2; border-radius: 22px; left: -20px; top: -1px; } .drow_menuzn{ position: absolute; left: 192px; width: 554px; top: -40px; padding-left: 32px; padding-top: 20px; box-sizing: border-box; height: 440px; background: #fff; border-radius: 0 10px 10px 0; box-shadow: 0 0 46px rgb(0 0 0 / 10%); display: none; } .aaa{ margin-top: 3px; } .banner_menu li:hover .drow_menuzn{ display: block; } /*用户登录*/ .user_info{ height: 88px; background: #fff; border-radius: 10px; box-shadow: 0 2px 26px rgb(0 0 0 / 7%); position: absolute; bottom: -46px; width: 100%; } .user_info li{ float: left; } .user_info li:first-child { width: 270px; height: 55px; margin-top: 17px; border-right: 1px solid #eee; padding-left: 26px; box-sizing: border-box; } .user_info li:first-child img{ width: 52px; height: 52px; margin-right: 17px; } .user_info li:first-child a { color: #333; } .user_info li:first-child p { font-size: 14px; color: #999; margin-bottom: 6px; } .user_text .news { display: inline-block; width: 66px; height: 20px; text-align: center; line-height: 20px; border-radius: 5px; border: 1px solid #e47b7f; color: #de5b60 !important; font-size: 13px; } .user_text .vip { color: #fde4b3 !important; background: #595454; border: 1px solid #595454 !important; margin-left: 8px; width: 68px; height: 22px; font-size: 13px; border-radius: 5px; padding: 0px 4px; box-sizing: border-box; } /*登录中间*/ .user_info li:nth-child(2){ width: 660px; margin-top: 17px; overflow: hidden; border-right: 1px solid #eee; } .icon_item { float: left; width: 84px; text-align: center; margin: 0 10px; } .icon_item img { width: 40px; height: 40px; } .icon_item p { font-size: 12px; color: #777; } .user_info li:nth-child(3) { width: 266px; height: 88px; } .top_tips { height: 43px; line-height: 43px; } .top_tips span{ color: #777; font-size: 14px; font-weight: 700; margin-left: 12px; margin-right: 5px; } .top_tips a{ color: #6f6f6f; font-size: 12px; }.b_icon { float: left; height: 42px; line-height: 42px; width: 88px; border-top: 1px solid #eee; text-align: center; } .b_icon img { width: 20px; height: 20px; vertical-align: middle; } .b_icon span { color: #666; font-size: 12px; } /*作业*/ .dhtupian{ width: 100%; height: 200px; position: absolute; bottom: -264px; } .dhtupian li{ float: left; margin-right: 13px; } .dhtupian li:last-child{ margin-right: 0px; } .dhtupian li img{ width: 290px; height: 200px; border-radius: 10px; } .rexiao{ width: 100%; height: 26px; position: absolute; bottom: -307px; padding: 27px 0 13px 0; } .rexiao h2{ font-size: 26px; color: #333; padding: 27px 0 13px 0; } .rexiaotupian{ width: 100%; height: 604px; position: absolute; bottom: -940px; } .rexiaotupian .biao{ width: 230px; height: 592px; border-radius: 10px; float: left; } .rexiaotupian ul li{ width: 228px; height: 290px; float: left; background: #f9f9f9; border-radius: 10px; margin-left: 14px; margin-bottom: 12px; margin-top: 0; } .rexiaotupian ul li a{ display: inline-block; width: 100%; height: 100%; text-align: center; margin-top:50%; transform: translateY(-25%); } .rexiaotupian ul li img{ width: 150px; height: 150px; } .rexiaotupian ul li .t{ font-size: 14px; color: #3a3a3a; margin-bottom: 3px; } .rexiaotupian ul li .x{ color: #777; line-height: 18px; padding: 0 10px; margin: 2px 20px 7px; font-size: 5px; } .rexiaotupian ul li .j{ color: #d0021b; line-height: 21px; margin-bottom: 0; } .rexiaotupian ul li:hover{ box-shadow:0px 0px 10px #000; } /*下半部分*/ .footer{ background-color: #f9f9f9; margin-top: 949px;/*问题3*/ } .shang{ width: 100%; height: 82px; border-bottom: 1px solid #e5e5e5;; box-sizing: border-box; } .shang li{ float: left; padding-right: 120px; line-height: 82px; } .shang li:last-child{ padding-right: 0px; } .one_q { background: url(../img/img/icon01.svg); width: 40px; height: 40px; display: inline-block; margin-right: 15px; background-position: -154px 0; vertical-align: middle; } .one_w{ background: url(../img/img/icon01.svg); width: 40px; height: 40px; display: inline-block; margin-right: 15px; background-position: -74px 0; vertical-align: middle; } .one_e{ background: url(../img/img/icon01.svg); width: 40px; height: 40px; display: inline-block; margin-right: 15px; background-position: -194px 0; vertical-align: middle; } .one_r{ background: url(../img/img/icon01.svg); width: 40px; height: 40px; display: inline-block; margin-right: 15px; background-position: -114px 0; vertical-align: middle; } .zhong{ width: 100%; height: 210.6px; box-sizing: border-box; } .zhong_zuo{ width: 920px; height: 210.6px; padding: 23px 0 24px; box-sizing: border-box; float: left; } .zhong_you{ width: 278px; height: 160px; float:right; text-align: center; padding: 23px 0 24px; box-sizing: border-box; } .zhong_you p:first-child{ font-size: 24px ; color: #575757; font-weight: bold; } .zhong_you p:nth-child(2n){ color: #575757; font-size: 14px; margin-top: 5px; } .zhong_you .bejing{ width: 170px; height: 34px; border-radius: 17px; background: #777; display: inline-block; line-height: 34px; margin-top: 5px; color: #fff; } .you_tubiao{ width: 250px; height: 24px; margin-top: 26px; } .you_tubiao li{ float: left; margin-left: 11px; } .you_tubiao a .tubiao_a{ background: url(../img/img/icon03.svg); display: inline-block; width: 24px; height: 24px; background-position: -126px -24px; } .you_tubiao a .tubiao_b{ background: url(../img/img/icon03.svg); display: inline-block; width: 24px; height: 24px; background-position: -150px -24px; } .you_tubiao a .tubiao_c{ background: url(../img/img/icon03.svg); display: inline-block; width: 24px; height: 24px; background-position: -174px -24px;} .you_tubiao a .tubiao_d{ background: url(../img/img/icon03.svg); display: inline-block; width: 24px; height: 24px; background-position: -24px -36px; } .content_zj{ width: 1200px; margin: 0 auto; position: relative; } .xia{ width: 100%; height: 134px; padding: 25px 0 28px 0; border-top: 1px solid #e5e5e5; box-sizing: border-box; position: relative; } .xia .zwf{ width: 82px; height: 134px; padding: 3px 20px 0 0; float: left; box-sizing: border-box; } .xia .zwf img{ width: 82px; height: 20px; } .zhong_zuo li{ float: left; line-height: 22px; padding-right: 79px; } .zhong_zuo h3{ padding-top: 5px; font-size: 14px; margin-bottom: 19px; } .zhong_zuo li a{ padding-bottom: 7px; color: #777; line-height: 22px; font-size: 12px; } .zhong_zuo li:last-child{ border-right: 1px solid #d3d3d3; } .zhong_zuo ul li a:hover{ color: crimson; } .zjbj{ box-sizing: border-box; text-align:left; } .zjbj .ul_a li,.zjbj .ul_a li a{ color: #a4a4a4; padding-right: 6px; font-size: 12px; line-height: 20px; box-sizing: border-box; } .shangb{ position: absolute; top: 25px; height: 24px; right: 13px; } .zjbj .ul_a li a:hover{ color: crimson; } .zjbj .ul_a li span{ border-right: 1px solid #d3d3d3; }