css布局实现大气pc端首页多级菜单+幻灯片效果代码
代码语言:html
所属分类:菜单导航
代码描述:css布局实现大气pc端首页多级菜单+幻灯片效果代码
代码标签: 大气 pc 端 首页 多级 菜单 + 幻灯片 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> body,fieldset,html,iframe,img { border: 0 } table { border-collapse: collapse; border-spacing: 0 } li { list-style: none } caption,th { font-weight: 400; font-style: normal; text-align: left } em { font-style: normal } strong { font-weight: 700 } body,input,select,textarea { font-family: Arial,"Hiragino Sans GB",\5fae\8f6f\96c5\9ed1,Helvetica,sans-serif; font-size: 14px; color: #444; outline: 0; border: 0 } textarea { resize: none } input { vertical-align: middle; margin: 0 } body { background-color: #fff } h1,h2,h3,h4,h5,h6 { font-weight: 400 } a,button { cursor: pointer } a { text-decoration: none; color: #333 } a:hover { color: #10ae58 } body,html { width: 100%; height: 100% } html { overflow: auto } body { text-align: left; background: #eee } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0; } button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none; } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .f-f0 { font-family: Arial,"Hiragino Sans GB",\5fae\8f6f\96c5\9ed1,Helvetica,sans-serif } .f-f1 { font-family: Arial,"Hiragino Sans GB",SimSun,\5b8b\4f53,Georgia,serif } .f-fl { float: left } .f-fr { float: right } .f-pa { position: absolute } .p-15 { padding: 15px } .f-cb:after,.f-cbli li:after { display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; content: "." } .f-cb,.f-cbli li { zoom: 1 } .f-thide { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -ms-text-overflow: ellipsis } .f-hide { text-indent: -9999px; overflow: hidden } .f-ib { display: inline-block; zoom: 1 } .f-dn { display: none } .f-db { display: block } .f-pr { position: relative } .f-pf { position: fixed } .f-af { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .g-flow{ width: 960px; margin: 0 auto; text-align: left } @media screen and (min-width:1210px) { .g-flow{ width: 1205px } body { overflow-x: hidden } } .globalnavsprite,.m-indextopnav .topheader .login .u-mystudy .u-learn-record .arr,.u-indexnavcatebtn .cbtn .ic,.u-indexnavcatedialog .cateright .close,.u-navapptip .arrr,.u-navapptip .rcon .store,.u-navdropmenu .arrr,.u-navusermenu .arrr { background: url(../images/ui_new_yktnav_sprite.png) 9999px 9999px no-repeat } .globalnavsprite,.m-yktNav .userinfo .u-mystudy .u-learn-record .arr,.u-navapptip .arrr,.u-navapptip .rcon .store,.u-navcatebtn .cbtn,.u-navcatedialog .arrr,.u-navcatedialog .cateright .close,.u-navdropmenu .arrr,.u-navusermenu .arrr { background: url(../images/ui_new_yktnav_sprite.png) 9999px 9999px no-repeat } .x-hide,.x-hoverItem .x-child { -webkit-transition-property: opacity,-webkit-transform; -moz-transition-property: opacity,-webkit-transform; -ms-transition-property: opacity,-webkit-transform; -o-transition-property: opacity,-webkit-transform; transition-property: opacity,-webkit-transform; -webkit-transition-duration: .15s; -moz-transition-duration: .15s; -ms-transition-duration: .15s; -o-transition-duration: .15s; transition-duration: .15s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transform: scale(.9); opacity: 0; pointer-events: none; display: none\9; visibility: hidden } .x-hoverItem:hover .x-child{ opacity: 1; -webkit-transform: scale(1); pointer-events: all; display: block\9; visibility: visible } .m-micro .m-micro-wrap .cntwrap .larr,.m-micro .m-micro-wrap .cntwrap .rarr { background: url(../images/indexsprite.png) no-repeat 9999px 9999px } .m-micro { z-index: 9; position: relative; margin-bottom: 30px } .m-micro .m-micro-wrap { border: 1px solid #ddd; border-top: none; padding: 15px 0; background-color: #fff } .m-micro .m-micro-wrap .item { border-left: 1px solid #ddd; width: 244px; height: 50px; padding: 0 10px } .m-micro .m-micro-wrap .item .imgbox { text-align: center; padding: 8px 0 5px 0; font-size: 32px; color: #2187e0; width: 46px; height: 46px; margin-left: 15px; margin-right: -82px } .m-micro .m-micro-wrap .item .tit { color: #333; width: 170px; font-size: 16px; margin-left: 65px; margin-top: 5px; line-height: 24px; height: 24px } .m-micro .m-micro-wrap .item .tit:hover { color: #39a030; text-decoration: none } .m-micro .m-micro-wrap .item .tip { color: #999; width: 170px; font-size: 12px; margin-left: 65px } .m-micro .m-micro-wrap .item:first-child { border-left: none } .m-micro .m-micro-wrap .item0 { text-align: center; width: 235px } .m-micro .m-micro-wrap .item0 a { display: block; padding-top: 4px } .m-micro .m-micro-wrap .item0 .intro { text-align: center; font-size: 12px; color: #2187e0 } .m-micro .m-micro-wrap .cntwrap { width: 1202px; overflow: hidden } .m-micro .m-micro-wrap .cntwrap .cntlist { width: 9999px; height: 50px } .m-micro .m-micro-wrap .cntwrap .larr,.m-micro .m-micro-wrap .cntwrap .rarr { display: none; height: 50px; width: 14px; cursor: pointer } .m-micro .m-micro-wrap .cntwrap .larr { left: 1px; top: 15px; background-position: 0 -74px } .m-micro .m-micro-wrap .cntwrap .larrhover { background-position: -53px -74px } .m-micro .m-micro-wrap .cntwrap .rarr { right: 0; top: 15px; background-position: -28px -74px } .m-micro .m-micro-wrap .cntwrap .rarrhover { background-position: -78px -74px } .m-micro .m-micro-wrap .cntwrap:hover .larr,.m-micro .m-micro-wrap .cntwrap:hover .rarr { display: block } .m-yktNav .g-flow { width: 1205px } .m-yktNav .m-nav { position: relative; zoom: 1; display: inline; float: left; height: 60px } .m-yktNav .m-nav .nitem { position: relative; cursor: pointer; float: left; color: #eee; font-size: 16px; line-height: 60px; padding: 0 17px } .m-yktNav .m-nav .nitem.down-wrap { padding: 0 } .m-yktNav .m-nav .nitem.down-wrap .downApp { padding: 0 15px; display: inline-block; height: 100% } .m-yktNav .m-nav .nitem.selected { color: #fff; background-color: #242630 } .m-yktNav .m-nav .nitem.cur { color: #fff; background-color: #484C57 } .m-yktNav .m-nav .nitem:hover { background-color: #484C57 } .m-yktNav .m-nav .toggledrop { display: none } .m-yktNav .m-nav .nitem.active .toggledrop,.m-yktNav .m-nav .nitem:hover .toggledrop { display: block } .m-indextopnav { z-index: 10; position: relative; height: 0 } .m-indextopnav .topnav { z-index: 1; height: 51px; background-color: #fff; border: 1px solid #ddd; border-bottom: none } .m-indextopnav .topnav .mainnav { float: left; height: 51px; padding-left: 249px } .m-indextopnav .topnav .mainnav .nitem { cursor: pointer; position: relative; float: left; color: #333; font-size: 16px; line-height: 51px; padding: 0 12px } .m-indextopnav .topnav .mainnav .nitem.down-wrap { padding: 0 } .m-indextopnav .topnav .mainnav .nitem.down-wrap .downApp { padding: 0 15px; display: inline-block; height: 100% } .m-indextopnav .topnav .mainnav .nitem.selected,.m-indextopnav .topnav .mainnav .nitem:hover { color: #fff; background-color: #31a030 } .m-indextopnav .topnav .search { position: relative; margin: 7px 6px 0 0; background-color: #fff; float: right; height: 34px; border: 1px solid #49af4f; width: 330px; -moz-transition: width .2s ease-out 0s; -o-transition: width .2s ease-out 0s; -webkit-transition: width .2s ease-out 0s; transition: width .2s ease-out 0s } .m-indextopnav .topnav .search.off { width: 216px; -moz-transition: width .2s ease-out 0s; -o-transition: width .2s ease-out 0s; -webkit-transition: width .2s ease-out 0s; transition: width .2s ease-out 0s } .m-indextopnav .topnav .search.off .delete-local { display: none } .m-indextopnav .topnav .search .search-type { line-height: 34px; cursor: pointer; position: relative } .m-indextopnav .topnav .search .search-type .select-list { line-height: 40px; padding: 0 9px; width: 49px; background-color: #fff; border: 1px solid #49af4f; border-top: none; left: -1px } .m-indextopnav .topnav .search .search-type .select-list:hover { color: #49af4f } .m-indextopnav .topnav .search .box { overflow: hidden; background: #fff; position: relative } .m-indextopnav .topnav .search .box input { background-color: #fff; height: 32px; line-height: 34px; color: #666; font-size: 14px; overflow: hidden; width: 100%; text-indent: 5px } .m-indextopnav .topnav .search .box label { height: 36px; position: absolute; top: 0; left: 5px; color: #aaa; font-size: 14px; cursor: text; line-height: 34px } .m-indextopnav .topnav .search .submit { display: block; width: 34px; height: 34px; cursor: pointer; right: 0; top: 0; background-image: url(../images/34BB5668E77F7D10A8581CBFAB5EA5CF.png) } .m-indextopnav .topnav .search .submit:hover { background-image: url(../images/9FFE3911A7E9E7C8DA028C542D7287DA.png) } .u-indexnavcatebtn { position: absolute; top: -1px; left: -1px; width: 224px; height: 52px; background-color: #31a030; overflow: hidden } .u-indexnavcatebtn .cbtn { display: block } .u-indexnavcatebtn .cbtn .ic { margin: 19px 10px 0 20px; width: 16px; height: 14px; background-position: 0 0 } .u-indexnavcatebtn .cbtn .qb { color: #fff; line-height: 54px; font-size: 17px } .u-indexnavcatedialog { left: -1px; top: 51px; width: 224px } .u-indexnavcatedialog a:hover { text-decoration: underline } .u-indexnavcatedialog .fadeInOut { animation-name: fadeInOut; animation-duration: .2s; animation-timing-function: ease-in-out } .u-indexnavcatedialog .cateleft { z-index: 2; top: 0; left: 0; width: 224px; height: 340px } .u-indexnavcatedialog .cateleft .catebg { top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .7; filter: alpha(opacity=60) } .u-indexnavcatedialog .cateleft .items { top: 0; left: 0; height: 340px; width: 100%; overflow: hidden } .u-indexnavcatedialog .cateleft .item { height: 48px; padding: 0 10px 0 13px; position: relative } .u-indexnavcatedialog .cateleft .item .inn { position: relative; z-index: 2; height: 48px; padding: 0 0 0 5px; border-bottom: 1px solid rgba(255,255,255,.2) } .u-indexnavcatedialog .cateleft .item .inn p { overflow: hidden; height: 53px } .u-indexnavcatedialog .cateleft .item .inn .first { display: inline-block; color: #fff; font-size: 14px; line-height: 53px } .u-indexnavcatedialog .cateleft .item .inn .second { display: inline-block; color: #fff\9; color: rgba(255,255,255,.8); font-size: 12px; margin-left: 11px; line-height: 53px } .u-indexnavcatedialog .cateleft .item .curbg { display: none; position: absolute; z-index: 1; top: 0; left: 0; width: 225px; height: 48px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff } .u-indexnavcatedialog .cateleft .item.on .inn { border-bottom: none } .u-indexnavcatedialog .cateleft .item.on .inn .first { color: #333 } .u-indexnavcatedialog .cateleft .item.on .inn .second { color: #666 } .u-indexnavcatedialog .cateleft .item.on .curbg { display: block } .u-indexnavcatedialog .cateleft .item.last .item { height: 53px } .u-indexnavcatedialog .cateleft .item.last .inn { border-bottom: 1px solid #ddd; height: 53px } .u-indexnavcatedialog .cateleft .item.last.on .curbg { height: 50px } .u-indexnavcatedialog .cateright { overflow: hidden; top: 0; left: 223px; width: 981px; z-index: 1; position: relative; background-color: #fff; border: 1px solid #ddd } .u-indexnavcatedialog .cateright.cur { display: none } .u-indexnavcatedialog .cateright .close { top: 20px; right: 20px; width: 14px; height: 14px; background-position: -155px 0; z-index: 10 } .u-indexnavcatedialog .cateright .rwrap { display: none; top: 0; left: 0; right: 0; bottom: 0; height: 419px; overflow: hidden } .u-indexnavcatedialog .cateright .rwrap .rwrap-left { float: left; width: 630px; margin: 0 85px 14px 0; padding-left: 42px } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .cat2 { float: left; line-height: 25px; padding-top: 12px; padding-right: 20px; overflow: hidden; text-align: left } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .cat2:hover { text-decoration: underline } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .links { padding-top: 12px; overflow: hidden } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .links a { color: #666; display: inline-block } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .links a:hover { text-decoration: underline; color: #666 } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .links .seperate { padding: 0 10px 0 0; color: #ccc; float: left } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .links a.rec { color: #33a126; white-space: nowrap } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .links a.rec:hover { color: #33a126 } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .links .cate3links { margin-left: 10px; font-size: 12px; line-height: 25px } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .top-rec { margin: 20px 20px 8px 0; padding: 6px 16px 5px 11px; background: #fff; border: 1px solid #ff8a00; border-radius: 2px; font-size: 14px; color: #ff8a00 } .u-indexnavcatedialog .cateright .rwrap .rwrap-left .top-rec:hover { background-color: #ff8a00; color: #fff; text-decoration: none } .u-indexnavcatedialog .cateright .rwrap .rwrap-right { float: left; width: 224px } .u-indexnavcatedialog .cateright .rwrap .rwrap-right .tit { font-size: 16px; color: #333; margin-top: 19px } .u-indexnavcatedialog .cateright .rwrap .rwrap-right .links { padding-top: 10px; line-height: 26px } .u-indexnavcatedialog .cateright .rwrap.on { display: block } .u-indexnavcatedialog .cateright .rwrap .tit { display: inline-block; font-size: 14px; line-height: 16px; color: #333 } .u-indexnavcatedialog .cateright .rwrap .mooctxt { padding-bottom: 38px } .u-indexnavcatedialog .cateright .rwrap .links { line-height: 25px; font-size: 12px; color: #666 } .u-indexnavcatedialog .cateright .rwrap .links .slash { padding: 0 10px; color: #ccc } .u-indexnavcatedialog .cateright .picwrap { margin-top: 10px; display: inline-block } .u-indexnavcatedialog .cateright .pic { width: 200px; height: 140px } .u-navapptip { top: 100%; left: -125px; padding: 20px; background-color: #fff; height: 140px; width: 310px; border: 1px solid #ddd; box-sizing: content-box } .u-navapptip .arrr { top: -9px; left: 50%; margin-left: -7px; width: 14px; height: 9px; background-position: -187px 0 } .u-navapptip .ewm { width: 140px; height: 140px; margin-right: 20px } .u-navapptip .rcon { width: 150px } .u-navapptip .rcon .txt { line-height: 28px; font-size: 17px; color: #666 } .u-navapptip .rcon .store { display: block; width: 150px; height: 44px; margin-top: 10px } .u-navapptip .rcon .store.apple { background-position: 0 -28px } .u-navapptip .rcon .store.android { background-position: 0 -76px } .u-navdropmenu { top: 100%; left: -25px; width: 160px; padding: 0; background: #fff; border: 1px solid #ddd } .u-navdropmenu .arrr { top: -9px; left: 50%; margin-left: -7px; width: 14px; height: 9px; background-position: -187px 0 } .u-navdropmenu .dropitem { text-align: left; line-height: 45px; font-size: 16px; color: #666; display: block } .u-navdropmenu .dropitem span { margin: 0 15px; display: block; border-bottom: 1px solid #ddd } .u-navdropmenu .dropitem:hover { background-color: #f8f8f8; color: #31a030 } .u-navdropmenu .dropitem.last span { border-bottom: none } .u-navusermenu { position: absolute; right: -3px; top: 44px } .u-navusermenu .arrr { top: -8px; right: 10px; width: 14px; height: 9px; background-position: -187px 0 } .u-navusermenu ul.menu { padding: 8px; text-align: left; background-color: #fff; border: 1px solid #ddd } .u-navusermenu ul.menu .text { border-bottom: 1px solid #eaeaea; font-size: 12px; white-space: nowrap } .u-navusermenu ul.menu li a { padding: 2px 10px 2px 10px; display: block; font-size: 12px; width: 140px; color: #666 } .u-navusermenu ul.menu li a:hover { background-color: #F3F4F6 } .u-navusermenu ul.menu li a.exit { border-top: 1px solid #e9e9e9 } .u-navcatedialog.x-hide,.x-hoverItem .u-navcatedialog.x-child { -webkit-transition-duration: 50ms; -moz-transition-duration: 50ms; -ms-transition-duration: 50ms; -o-transition-duration: 50ms; transition-duration: 50ms } .u-navcatedialog { left: -189px; top: 60px; width: 224px; background-color: #fff; border: 1px solid #ddd; border-top: none; width: 1203px; height: 420px } .u-navcatedialog a:hover { text-decoration: underline } .u-navcatedialog.cur { display: block } .u-navcatedialog .arrr { top: -9px; left: 225px; margin-left: 0; width: 14px; height: 9px; background-position: -187px 0; z-index: 1; position: absolute } .u-navcatedialog .cateleft { z-index: 2; top: 0; left: 0; width: 224px; height: 420px; background-color: #39a030; border-bottom: 1px solid #ddd } .u-navcatedialog .cateleft .catebg { top: 0; left: 0; width: 100%; height: 100% } .u-navcatedialog .cateleft .items { top: 0; left: 0; height: 420px; width: 100%; overflow: hidden } .u-navcatedialog .cateleft .item { height: 60px; padding: 0 10px 0 13px; position: relative } .u-navcatedialog .cateleft .item .inn { position: relative; z-index: 2; height: 60px; padding: 0 0 0 5px; border-bottom: 1px solid rgba(255,255,255,.2) } .u-navcatedialog .cateleft .item .inn p { overflow: hidden; height: 60px } .u-navcatedialog .cateleft .item .inn .first { display: inline-block; color: #fff; font-size: 14px; line-height: 65px } .u-navcatedialog .cateleft .item .inn .second { display: inline-block; color: #fff; font-size: 12px; margin-left: 11px; line-height: 65px } .u-navcatedialog .cateleft .item .curbg { display: none; position: absolute; z-index: 1; top: 0; left: 0; width: 225px; height: 60px; border-top: 1px solid #39a030; border-bottom: 1px solid #39a030; background-color: #fff } .u-navcatedialog .cateleft .item.cur .inn { border-bottom: none } .u-navcatedialog .cateleft .item.cur .inn .first { color: #333 } .u-navcatedialog .cateleft .item.cur .inn .second { color: #666 } .u-navcatedialog .cateleft .item.cur .curbg { display: block } .u-navcatedialog .cateleft .item.last .inn { border-bottom: none } .u-navcatedialog .cateright { top: 0; left: 223px; width: 981px; z-index: 1; position: relative; background-color: #fff; border: 1px solid #ddd; border-top: none } .u-navcatedialog .cateright.cur { display: block } .u-navcatedialog .cateright .close { top: 20px; right: 20px; width: 14px; height: 14px; background-position: -155px 0; z-index: 10 } .u-navcatedialog .cateright .rwrap { display: none; top: 0; left: 0; right: 0; bottom: 0; height: 420px; overflow: hidden } .u-navcatedialog .cateright .rwrap .rwrap-left { float: left; width: 630px; margin: 0 85px 14px 0; padding-left: 42px } .u-navcatedialog .cateright .rwrap .rwrap-left .cat2 { float: left; line-height: 25px; padding-top: 12px; padding-right: 20px; overflow: hidden; text-align: left } .u-navcatedialog .cateright .rwrap .rwrap-left .cat2:hover { text-decoration: underline } .u-navcatedialog .cateright .rwrap .rwrap-left .links { padding-top: 12px; overflow: hidden } .u-navcatedialog .cateright .rwrap .rwrap-left .links a { color: #666; display: inline-block } .u-navcatedialog .cateright .rwrap .rwrap-left .links a:hover { text-decoration: underline; color: #666 } .u-navcatedialog .cateright .rwrap .rwrap-left .links .seperate { padding: 0 10px 0 0; color: #ccc; float: left } .u-navcatedialog .cateright .rwrap .rwrap-left .links a.rec { color: #33a126; white-space: nowrap } .u-navcatedialog .cateright .rwrap .rwrap-left .links a.rec:hover { color: #33a126 } .u-navcatedialog .cateright .rwrap .rwrap-left .links .cate3links { margin-left: 10px; font-size: 12px; line-height: 25px } .u-navcatedialog .cateright .rwrap .rwrap-left .top-rec { margin: 20px 20px 8px 0; padding: 4px 16px 3px 11px; background: #fff; border: 1px solid #ff8a00; border-radius: 2px; font-size: 14px; color: #ff8a00 } .u-navcatedialog .cateright .rwrap .rwrap-left .top-rec:hover { background-color: #ff8a00; color: #fff; text-decoration: none } .u-navcatedialog .cateright .rwrap .rwrap-right { float: left; width: 224px } .u-navcatedialog .cateright .rwrap .rwrap-right .tit { font-size: 16px; color: #333; margin-top: 19px } .u-navcatedialog .cateright .rwrap .rwrap-right .links { padding-top: 10px; line-height: 26px } .u-navcatedialog .cateright .rwrap.cur { display: block } .u-navcatedialog .cateright .rwrap .tit { display: inline-block; font-size: 14px; line-height: 16px; color: #333 } .u-navcatedialog .cateright .rwrap .mooctxt { padding-bottom: 38px } .u-navcatedialog .cateright .rwrap .links { line-height: 25px; font-size: 12px; color: #666 } .u-navcatedialog .cateright .rwrap .links .slash { padding: 0 10px; color: #ccc } .u-navcatedialog .cateright .picwrap { margin-top: 10px; display: inline-block } .u-navcatedialog .cateright .pic { width: 200px; height: 140px } .u-navapptip { top: 100%; left: -125px; padding: 20px; background-color: #fff; height: 140px; width: 310px; border: 1px solid #ddd; box-sizing: content-box } .u-navapptip .arrr { top: -9px; left: 50%; margin-left: -7px; width: 14px; height: 9px; background-position: -187px 0 } .u-navapptip .ewm { width: 140px; height: 140px; margin-right: 20px } .u-navapptip .rcon { width: 150px } .u-navapptip .rcon .txt { line-height: 28px; font-size: 17px; color: #666 } .u-navapptip .rcon .store { display: block; width: 150px; height: 44px; margin-top: 10px } .u-navapptip .rcon .store.apple { background-position: 0 -28px } .u-navapptip .rcon .store.android { background-position: 0 -76px } .u-navdropmenu { top: 100%; left: -25px; width: 160px; padding: 0; background: #fff; border: 1px solid #ddd } .u-navdropmenu .arrr { top: -9px; left: 50%; margin-left: -7px; width: 14px; height: 9px; background-position: -187px 0 } .u-navdropmenu .dropitem { text-align: left; line-height: 45px; font-size: 16px; color: #666; display: block } .u-navdropmenu .dropitem span { margin: 0 15px; display: block; border-bottom: 1px solid #ddd } .u-navdropmenu .dropitem:hover { background-color: #f8f8f8; color: #31a030 } .u-navdropmenu .dropitem.last span { border-bottom: none } .hidddenClass { visibility: hidden } #m-slide-container { z-index: 1; min-height: 340px; background-color: #eee; position: relative; top: 0 } .m-slide { background-color: #ddd; width: 100%; min-height: 293px; height: 340px; overflow: hidden; max-width: 1920px; } .m-slide .m-slide-wrap { height: 341px } .m-slide .lbtn,.m-slide .rbtn { position: absolute; height: 70px; width: 40px; top: 50%; margin-top: -35px; background: url(../images/indexSlideArrow.png) no-repeat 0 0; z-index: 100 } .m-slide .lbtn { left: 31%; background-position: 0 0 } .m-slide .lbtn:hover { background-position: 0 -95px } .m-slide .rbtn { right: 31%; background-position: -66px 0 } .m-slide .rbtn:hover { background-position: -66px -95px } .m-slide .slide { display: inline-block; overflow: hidden; margin: 0 auto; position: relative; width: 100% } .m-slide .slide ul { } .m-slide .slide ul li { width: 100%; text-align: center; } .m-slide .slide ul li:first-child { background-color: #76e7b9; } .m-slide .slide ul li:nth-child(2) { background-color: #6fd6a1; } .m-slide .slide ul li:nth-child(3) { background-color: #5e3030; } .m-slide .slide ul li:nth-child(4) { background-color: #f0e3da; } .m-slide .slide ul li:nth-child(5) { background-color: #f1b76e; } .m-slide .slide ul li:nth-child(6) { background-color: #1a2751; } .m-slide .slide ul li:nth-child(7) { background-color: #ddfced; } .m-slide .slide img { height: 340px; width: 980px } .m-slide .u-slidepg { bottom: 31px } .m-slide .u-slidepg ul { vertical-align: bottom; height: 16px } .m-slide .u-slidepg ul li { position: relative; width: 8px; height: 16px; background: 0 0 } .m-slide .u-slidepg ul li:after { background-color: #fff; background-color: rgba(255,255,255,.7); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff, endColorstr=#b3ffffff); content: '.'; text-indent: -99px; position: absolute; bottom: 0; left: 0; width: 8px; height: 8px } .m-slide .u-slidepg ul li.on { background: 0 0 } .m-slide .u-slidepg ul li.on:after { -moz-transition: all .6s ease 0s; -o-transition: all .6s ease 0s; -webkit-transition: all .6s ease 0s; transition: all .6s ease 0s; height: 16px; background-color: #fff } .m-slide .lbevel,.m-slide .rbevel { display: none } .m-slide .lbevel { top: 0; right: 50%; margin-right: 480px; background-position: 0 0 } .m-slide .rbevel { z-index: 0; top: 0; left: 50%; margin-left: 480px; background-position: -414px 0 } .m-slide .sideNav { z-index: 2; width: 225px; height: 280px; right: 18.6%; top: 30px; background: #fff } .m-slide .sideNav .sidelink { display: inline-block } .m-slide .sideNav .yktqr { width: 100%; height: 100%; background: #fff; z-index: 2 } .m-slide .sideNav .yktqr img { width: 100%; height: 100% } .m-slide .sideNav .sideimg { width: 225px; height: 160px } .m-slide .sideNav .liveflag { width: 68px; height: 24px; line-height: 24px; background: #49af4f; border-radius: 0 12px 12px 0; top: 10px; color: #fff; font-size: 14px; padding-left: 6px } .m-slide .sideNav .redlive { background: #ff1d00 } .m-slide .sideNav .cnt { margin-top: -3px; font-size: 14px; padding: 10px 20px 16px; height: 94px } .m-slide .sideNav .cnt .teacher { height: 18px; overflow: hidden; word-break: break-all } .m-slide .sideNav .cnt p { font-size: 12px; color: #666; line-height: 18px } .m-slide .sideNav .cnt .title { color: #333; line-height: 26px; font-size: 16px; max-height: 52px; overflow: hidden; margin-bottom: 6px } .m-slide .sideNav .cnt .title:hover { color: #49af4f } @media screen and (min-width:1210px) { .m-slide .lbevel { margin-right: 602.5px } .m-slide .rbevel { margin-left: 602.5px } } .u-slidepg { position: absolute; width: 100%; text-align: center } .u-slidepg ul { height: 6px; position: relative } .u-slidepg ul li { width: 12px; height: 6px; background: rgba(0,0,0,.3); margin-right: 8px; float: left; text-indent: 100px; overflow: hidden; cursor: pointer } .u-slidepg ul li.js-selected { cursor: default; background: #00a650 } @media screen and (max-width:1710px) { .m-slide .lbtn{left: 28%;} .m-slide .rbtn {right: 28.5%;} .m-slide .sideNav {right: 15%;} } @media screen and (max-width:1410px) { .m-slide .lbtn{left: 23.5%;} .m-slide .rbtn {right: 24.5%;} .m-slide .sideNav {right: 7.5%;} } @media screen and (max-width:1210px) { .m-slide .lbtn{left: 19%;} .m-slide .rbtn {right: 19.5%;} .m-slide .sideNav {right: 0.5%;} } @font-face { font-family: "ux-micro-icon"; src: url('ux-micro-icon.eot'); src: url('ux-micro-icon.eot') format('embedded-opentype'), url('//repo.bfw.wiki/bfwrepo/font/ux-micro-icon.ttf') format('truetype'), url('ux-micro-icon.woff') format('woff'), url('ux-micro-icon.svg') format('svg'); font-weight: normal; font-style: normal; } [class^="ux-micro-icon-"], [class*=" ux-micro-icon-"]{ font-family: "ux-micro-icon" !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; line-height: 1; } .ux-micro-icon-1001106002:before{content:"\EA01"} .ux-micro-icon-1001122002:before{content:"\EA02"} .ux-micro-icon-1001127001:before{content:"\EA03"} .ux-micro-icon-1001137001:before{content:"\EA04"} .ux-micro-icon-1001168001:before{content:"\EA05"} .ux-micro-icon-1001176001:before{content:"\EA06"} .ux-micro-icon-1001177002:before{content:"\EA07"} .ux-micro-icon-1001180001:before{content:"\EA08"} .ux-micro-icon-1001195002:before{content:"\EA09"} .ux-micro-icon-1001197001:before{content:"\EA0A"} .ux-micro-icon-1001201003:before{content:"\EA0B"} .ux-micro-icon-1001227001:before{content:"\EA0C"} .ux-micro-icon-1001268002:before{content:"\EA0D"} .ux-micro-icon-1001280001:before{content:"\EA0E"} .ux-micro-icon-1001316008:before{content:"\EA0F"} .ux-micro-icon-1001352005:before{content:"\EA10"} .ux-micro-icon-1001358002:before{content:"\EA11"} .ux-micro-icon-1001358003:before{content:"\EA12"} .ux-micro-icon-1001359001:before{content:"\EA13"} .ux-micro-icon-1001359002:before{content:"\EA14"} .ux-micro-icon-1001359003:before{content:"\EA15"} .ux-micro-icon-1001360001:before{content:"\EA16"} .ux-micro-icon-1001360002:before{content:"\EA17"} .ux-micro-icon-1001385001:before{content:"\EA18"} .ux-micro-icon-1001386001:before{content:"\EA19"} .ux-micro-icon-1001386007:before{content:"\EA1A"} .ux-micro-icon-1001405003:before{content:"\EA1B"} .ux-micro-icon-1001415001:before{content:"\EA1C"} .ux-micro-icon-1001420002:before{content:"\EA1D"} .ux-micro-icon-1001423006:before{content:"\EA1E"} .ux-micro-icon-1001426003:before{content:"\EA1F"} .ux-micro-icon-1001429007:before{content:"\EA20"} .ux-micro-icon-20001:before{content:"\EA21"} .ux-micro-icon-28001:before{content:"\EA22"} .ux-micro-icon-85001:before{content:"\EA23"} .ux-micro-icon-85002:before{content:"\EA24"} .ux-micro-icon-AIKE:before{content:"\EA25"} .ux-micro-icon-Android:before{content:"\EA26"} .ux-micro-icon-CDA:before{content:"\EA27"} .ux-micro-icon-HR:before{content:"\EA28"} .ux-micro-icon-Unityyouxikaifagongchengshi:before{content:"\EA29"} .ux-micro-icon-VR:before{content:"\EA2A"} .ux-micro-icon-VRyouxikaifagongchengshi:before{content:"\EA2B"} .ux-micro-icon-caifu:before{content:"\EA2C"} .ux-micro-icon-cfc:before{content:"\EA2D"} .ux-micro-icon-chuangye:before{content:"\EA2E"} .ux-micro-icon-deep-learning:before{content:"\EA2F"} .ux-micro-icon-estate-data:before{content:"\EA30"} .ux-micro-icon-newManager:before{content:"\EA31"} .ux-micro-icon-shouyouUIshejishi:before{content:"\EA32"} .ux-micro-icon-shouyouchangjingshejishi:before{content:"\EA33"} .ux-micro-icon-shujufenxishi��zhongji��:before{content:"\EA34"} .ux-micro-icon-uniE61B:before{content:"\EA35"} .ux-micro-icon-uniE61D:before{content:"\EA36"} .ux-micro-icon-uniE61E:before{content:"\EA37"} .ux-micro-icon-uniE634:before{content:"\EA38"} .ux-micro-icon-uniE915:before{content:"\EA39"} .ux-micro-icon-wechatsenior:before{content:"\EA3A"} .ux-micro-icon-yuanhuashejishi:before{content:"\EA3B"} .ux-micro-icon-1001106002-after:after{content:"\EA01"} .ux-micro-icon-1001122002-after:after{content:"\EA02"} .ux-micro-icon-1001127001-after:after{content:"\EA03"} .ux-micro-icon-1001137001-after:after{content:"\EA04"} .ux-micro-icon-1001168001-after:after{content:"\EA05"} .ux-micro-icon-1001176001-after:after{content:"\EA06"} .ux-micro-icon-1001177002-after:after{content:"\EA07"} .ux-micro-icon-1001180001-after:after{content:"\EA08"} .ux-micro-icon-1001195002-after:after{content:"\EA09"} .ux-micro-icon-1001197001-after:after{content:"\EA0A"} .ux-micro-icon-1001201003-after:after{content:"\EA0B"} .ux-micro-icon-1001227001-after:after{content:"\EA0C"} .ux-micro-icon-1001268002-after:after{content:"\EA0D"} .ux-micro-icon-1001280001-after:after{content:"\EA0E"} .ux-micro-icon-1001316008-after:after{content:"\EA0F"} .ux-micro-icon-1001352005-after:after{content:"\EA10"} .ux-micro-icon-1001358002-after:after{content:"\EA11"} .ux-micro-icon-1001358003-after:after{content:"\EA12"} .ux-micro-icon-1001359001-after:after{content:"\EA13"} .ux-micro-icon-1001359002-after:after{content:"\EA14"} .ux-micro-icon-1001359003-after:after{content:"\EA15"} .ux-micro-icon-1001360001-after:after{content:"\EA16"} .ux-micro-icon-1001360002-after:after{content:"\EA17"} .ux-micro-icon-1001385001-after:after{content:"\EA18"} .ux-micro-icon-1001386001-after:after{content:"\EA19"} .ux-micro-icon-1001386007-after:after{content:"\EA1A"} .ux-micro-icon-1001405003-after:after{content:"\EA1B"} .ux-micro-icon-1001415001-after:after{content:"\EA1C"} .ux-micro-icon-1001420002-after:after{content:"\EA1D"} .ux-micro-icon-1001423006-after:after{content:"\EA1E"} .ux-micro-icon-1001426003-after:after{content:"\EA1F"} .ux-micro-icon-1001429007-after:after{content:"\EA20"} .ux-micro-icon-20001-after:after{content:"\EA21"} .ux-micro-icon-28001-after:after{content:"\EA22"} .ux-micro-icon-85001-after:after{content:"\EA23"} .ux-micro-icon-85002-after:after{content:"\EA24"} .ux-micro-icon-AIKE-after:after{content:"\EA25"} .ux-micro-icon-Android-after:after{content:"\EA26"} .ux-micro-icon-CDA-after:after{content:"\EA27"} .ux-micro-icon-HR-after:after{content:"\EA28"} .ux-micro-icon-Unityyouxikaifagongchengshi-after:after{content:"\EA29"} .ux-micro-icon-VR-after:after{content:"\EA2A"} .ux-micro-icon-VRyouxikaifagongchengshi-after:after{content:"\EA2B"} .ux-micro-icon-caifu-after:after{content:"\EA2C"} .ux-micro-icon-cfc-after:after{content:"\EA2D"} .ux-micro-icon-chuangye-after:after{content:"\EA2E"} .ux-micro-icon-deep-learning-after:after{content:"\EA2F"} .ux-micro-icon-estate-data-after:after{content:"\EA30"} .ux-micro-icon-newManager-after:after{content:"\EA31"} .ux-micro-icon-shouyouUIshejishi-after:after{content:"\EA32"} .ux-micro-icon-shouyouchangjingshejishi-after:after{content:"\EA33"} .ux-micro-icon-uniE61B-after:after{content:"\EA35"} .ux-micro-icon-uniE61D-after:after{content:"\EA36"} .ux-micro-icon-uniE61E-after:after{content:"\EA37"} .ux-micro-icon-uniE634-after:after{content:"\EA38"} .ux-micro-icon-uniE915-after:after{content:"\EA39"} .ux-micro-icon-wechatsenior-after:after{content:"\EA3A"} .ux-micro-icon-yuanhuashejishi-after:after{content:"\EA3B"} </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.SuperSlide.2.1.3.js"></script> </head> <body> <div class="m-indextopwrap f-pr"> <div class="m-indextopnav"> <div class="g-flow"> <div class="topnav f-pr f-cb"> <div class="u-indexnavcatebtn"> <a href="#" target="_blank" class="cbtn f-cb"> <div class="ic f-fl"> </div> <span class="qb f-fl f-f0">全部精品课</span></a> </div> <div class="u-indexnavcatedialog f-pa" id="j-nav-indexcatedialog"> <div class="f-fl cateleft f-pa"> <div class="catebg f-pa"> </div> <div class="items f-pa"> <div class="item"> <div class="curbg"> </div> <div class="inn"> <p> <a target="_blank" href="#" class="f-f0 first">办公效率</a> <a href="#" target="_blank" class="second">PPT</a> <a href="#" target="_blank" class="second">Excel</a> <a href="#" target="_blank" class="second">Word</a> </p> </div> </div> <div class="item"> <div class="curbg"> </div> <div class="inn"> <p> <a target="_blank" href="#" class="f-f0 first">职业发展</a> <a href="#" target="_blank" class="second">个人成长</a> <a href="#" target="_blank" class="second">演讲口才</a> </p> </div> </div> <div class="item"> <div class="curbg"> </div> <div class="inn"> <p> <a target="_blank" href="#" class="f-f0 first">编程开发</a> <a href="#" target="_blank" class="second">人工智能</a> <a href="#" target="_blank" class="second">Python</a> </p> </div> </div> <div class="item"> <div class="curbg"> </div> <div class="inn"> <p> <a target="_blank" href="#" class="f-f0 first">产品和设计</a> <a href="#" target="_blank" class="second">软件</a> <a href="#" target="_blank" class="second">产品运营</a> <a href="#" target="_blank" class="second">新媒体</a> <a href="#" target="_blank" class="second">产品策划</a> </p> </div> </div> <div class="item"> <div class="curbg"> </div> <div class="inn"> <p> <a target="_blank" href="#" class="f-f0 first">生活方式</a> <a href="#" target="_blank" class="second">摄影</a> <a href="#" target="_blank" class="second">书法</a> <a href="#" target="_blank" class="second">理财</a> </p> </div> </div> <div class="item"> <div class="curbg"> </div> <div class="inn"> <p> <a target="_blank" href="#" class="f-f0 first">升学辅导</a> <a href="#" target="_blank" class="second">考研</a> <a href="#" target="_blank" class="second">STEAM</a> <a href="#" target="_blank" class="second">小学</a> </p> </div> </div> <div class="item last"> <div class="curbg"> </div> <div class="inn"> <p> <a target="_blank" href="#" class="f-f0 first">语言学习</a> <a href="#" target="_blank" class="second">英语</a> <a href="#" target="_blank" class="second">日语</a> <a href="#" target="_blank" class="second">新概念</a> <a href="#" target="_blank" class="second">实用口语</a> <a href="#" target="_blank" class="second">韩语</a> </p> </div> </div> </div> </div> <div class="cateright f-pa f-cb"> <a class="close f-pa j-close" onclick="$('.rwrap').hide();"></a> <div class="f-pr rwrap f-cb cur"> <div class="rwrap-left f-cb"> <div class="top-rec-box f-cb"> <a class="top-rec f-fl" href="#" target="_blank">办公效率·精选好课</a> <a class="top-rec f-fl" href="#" target="_blank">跟刘万祥学Excel商务图表</a> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">办公软件</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 rec">PPT</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">Excel</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">Word</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">Project</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">Keynote</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">Outlook</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">更多软件</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">工作效率</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 ">时间管理</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">思维导图</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">电脑基础</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a 基础操作" target="_blank" href="#" class="f-f0 ">基础操作</a> <span class="slash">|</span> <a 常用工具" target="_blank" href="#" class="f-f0 ">常用工具</a> </p> </div> </div> <div class="rwrap-right f-cb"> <a class="f-f0 tit" href="#" target="_blank">系列课程</a> <p class="links"> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">从Excel到Power BI数据分析可视化</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">Excel+PPT+Word小白变大神</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">英语口语指南——为暑期出境旅游定制</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">向《经济学人》学图表</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">向商业期刊学图表</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">如何成为真正的PPT高手</a> <a href="#" class="f-fc6 f-f0" target="_blank">更多>></a> </p> <a href="#" target="_blank" class="picwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e5734faa99cc.png" class="f-pa pic"> </a> </div> </div> <div class="f-pr rwrap f-cb"> <div class="rwrap-left f-cb"> <div class="top-rec-box f-cb"> <a class="top-rec f-fl" href="#" target="_blank">职业发展·精选好课</a> <a class="top-rec f-fl" href="#" target="_blank">2018年提升路线图</a> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">求职应聘</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 rec">职业规划</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">求职简历</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">面试技巧</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">个人提升</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 ">知识管理</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">习惯养成</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">演讲与口才</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">个人品牌</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">思维方式</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">职场能力</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 rec">职场经验</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">人脉管理</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">礼仪形象</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">人际沟通</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">团队协作</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">专业岗位</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 rec">医学科研</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">文献写作</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">商务谈判</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">职业培训</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">特色职业</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">管理能力</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 ">领导力</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">人力资源</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">财务管理</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">项目管理</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">职业考试</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 ">财会金融管理类</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">公务员</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">工程医学类</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">电子商务师</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">新媒体运营师</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">更多考试</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">市场营销</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 ">市场销售</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">电子商务</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">品牌推广</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">网络营销</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">商业创业</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 rec">经济学</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">商业创业</a> </p> </div> </div> <div class="rwrap-right f-cb"> <a class="f-f0 tit" href="#" target="_blank">系列课程</a> <p class="links"> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">向500强精英学习职场经验</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">跟秋叶一起轻松学会职场技能</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">高效成长:芝士魔方课程合集</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">跟职场教练柏永辉学人生进阶术</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">快速提升批判性思维系列课</a> <a href="#" class="f-cb f-fc6 f-f0" target="_blank">改变职场命运的9门必修课</a> <a href="#" class="f-fc6 f-f0" target="_blank">更多>></a> </p> <a href="#" target="_blank" class="picwrap"> <img src="//repo.bfw.wiki/bfwrepo/image/5e5734faa99cc.png" class="f-pa pic"> </a> </div> </div> <div class="f-pr rwrap f-cb"> <div class="rwrap-left f-cb"> <div class="top-rec-box f-cb"> <a class="top-rec f-fl" href="#" target="_blank">人工智能行家带你学</a> <a class="top-rec f-fl" href="#" target="_blank">Python实战好课</a> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">编程语言</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 rec">Python</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">PHP</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">C语言</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">Java</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">C++</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">C#</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">Swift</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">R</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">Git</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">人工智能与数据</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 rec">人工智能</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">数据科学</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 rec">大数据</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">数据库</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">区块链</a> </p> </div> <a href="#" class="f-f0 first cat2 tit f-fl" target="_blank">前端开发</a> <div class="links"> <span class="seperate">|</span> <p class="cate3links"> <a target="_blank" href="#" class="f-f0 ">开发语言</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">开发框架</a> <span class="slash">|</span> <a target="_blank" href="#" class="f-f0 ">开发实践</a> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0