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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0