axui布局实现一个自适应响应式简洁的后台管理系统页面效果
代码语言:html
所属分类:布局界面
代码描述:axui布局实现一个自适应响应式简洁的后台管理系统页面效果
代码标签: 一个 自 适应 响应 式 简洁 的 后台 管理系统 页面 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-touch-fullscreen" content="yes"/> <meta name="format-detection" content="email=no" /> <meta name="wap-font-scale" content="no" /> <meta name="viewport" content="user-scalable=no, width=device-width" /> <meta content="telephone=no" name="format-detection" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="https://at.alicdn.com/t/font_1551254_sk7y2quxfyq.css" rel="stylesheet" type="text/css" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ax.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ax-response.css"> <style> @charset "utf-8"; /*body*/ .ax-admin { width: 100%; height: 100%; } /*nav*/ .ax-admin nav { border-right: 1px solid #ebebeb; background-color: #fff; width: calc(220px + 1px); transition: all 0.2s linear; position: fixed; left: 0; top: 0; z-index: 3; } .ax-admin nav .ax-nav-header { border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: relative; height: 44px; overflow: hidden; } .ax-admin nav .ax-nav-header .ax-logo { position: relative; } .ax-admin nav .ax-nav-header .ax-logo img { height:30px; margin-left: 20px; margin-top:5px; } .ax-admin nav .ax-nav-header .ax-close-nav { color: #333333; width: 44px; height: 44px; line-height: 44px; text-align: center; position: absolute; right: 0; top: 0; background-color: #fff; z-index: 2; transition: all 0.2s linear; } .ax-admin nav .ax-nav-main { height: 100%; overflow-x: hidden; overflow-y: auto; } /*menu fold*/ .ax-admin nav.ax-nav-fold { width: 52px; } .ax-admin nav.ax-nav-fold .ax-nav-header .ax-close-nav { width: 52px; transform: rotateY(180deg); } .ax-admin nav.ax-nav-fold .ax-menu .ax-legend { margin-right: 14px; } .ax-admin nav.ax-nav-fold-all { width: 0; } .ax-admin nav .ax-mask { width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); cursor: pointer; position: absolute; left: 0; top: 0; display: none; } .ax-admin nav.ax-nav-fold .ax-mask { display: block; } /*end*/ /*header*/ .ax-admin header { width: calc(100% - 220px); background-color: #fff; border-bottom: 1px solid #ebebeb; transition: all 0.2s linear; position: fixed; left: 220px; top: 0; z-index: 2; } .ax-admin header + .ax-space-header { height: 44px; } .ax-admin nav.ax-nav-fold + header { width: calc(100% - 52px); left: 52px; } .ax-admin header .ax-breadcrumb { height: 44px; line-height: 44px; padding-left: 14px; } .ax-admin header .ax-header-icons a { color: #adbdcc; font-size: 16px; float: left; width: 36px; line-height: 44px; text-align: center; position: relative; transition: all 0.2s linear; } .ax-admin header .ax-header-icons a:hover { color: #198cff; } .ax-admin header .ax-header-icons a .ax-dot { position: absolute; right: 4px; top: 8px; } .ax-header-icons a .ax-badge { position: absolute; right: 0px; top: 4px; } .ax-admin header .ax-header-search { position: relative; margin: calc((44px - 28px)/2); } .ax-admin header .ax-header-search input[type="text"] { height: 28px; line-height: 28px; } .ax-admin header .ax-header-search *[class*="font"] { font-size: 12px; color: #ccc; width: 28px; height: 28px; line-height: 28px; text-align: center; position: absolute; right: 0; top: 0; z-index: 2; } .ax-admin header .ax-header-search *[class*="font"]:hover { color: #198cff; font-size: 14px; } .ax-admin header .ax-header-user { margin: calc((44px - 28px)/2); } /**/ /*main*/ .ax-admin main { transition: all 0.2s linear; margin-left: 220px; width: 1000px; max-width: calc(100% - 220px - 120px); } .ax-admin nav.ax-nav-fold + header + .ax-space-header + main { margin-left: 52px; max-width: calc(100% - 52px - 120px); } /*footer*/ .ax-admin footer { padding: 0 14px; text-align: center; color: #ccc; } .ax-admin footer a { color: #ccc; } /*Telephone & iPad*/ @media screen and (max-width: 900px) { .ax-admin nav.ax-nav-fold + header + .ax-space-header + main, .ax-admin main { margin-left: 0; width: 100%; max-width: 100%; } .ax-admin nav.ax-nav-fold + header, .ax-admin header { width: 100%; padding-left: 52px; left: 0px; } .ax-admin header .ax-header-search { width: 110px; } .ax-admin header .ax-breadcrumb { padding-left: 0; } .ax-admin nav.ax-nav-fold { width: 220px; left: -221px; } .ax-admin nav.ax-nav-fold .ax-mask { display: none; } .ax-admin nav .ax-nav-header { overflow: visible; } .ax-admin nav.ax-nav-fold .ax-nav-header .ax-close-nav { right: -52px; } .ax-scrollnav-v { background-color: rgba(255, 255, 255, 0.9); border: 1px solid #ebebeb; border-radius: 3px; } } </style> </head> <body class="ax-admin"> <!--nav--> <nav class="ax-flex-col"> <div class="ax-nav-header"> <a href="##" class="ax-logo"><img src="//repo.bfw.wiki/bfwrepo/image/5f9d24338ca70.png" /></a> <a href="##" class="ax-close-nav ax-iconfont ax-icon-menu-fold"></a> </div> <div class="ax-flex-block ax-nav-main"> <ul class="ax-menu ax-style-dot" id="menu-basic"> <li> <a href="##"><span class="ax-legend ax-iconfont ax-icon-settings-alt"></span><span class="ax-name">系统配置</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="##"><span class="ax-name">组织架构管理</span></a></li> <li><a href="##"><span class="ax-name">人员管理</span></a></li> <li><a href="##"><span class="ax-name">功能权限管理</span></a></li> <li><a href="##"><span class="ax-name">数据权限管理</span></a></li> </ul> </li> <li> <a href="#"><span class="ax-legend ax-iconfont ax-icon-message-o"></span><span class="ax-name">团队协作</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="##"><span class="ax-name">日历</span></a></li> <li><a href="##"><span class="ax-name">笔记</span></a></li> <li><a href="##"><span class="ax-name">任务看板</span></a></li> <li><a href="##"><span class="ax-name">知识库</span></a></li> </ul> </li> <li> <a href="#"><span class="ax-legend ax-iconfont ax-icon-global"></span><span class="ax-name">监控管理</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a> <ul> <li><a href="##"><span class="ax-name">注册中心监控</span></a></li> <li><a href="##"><span class="ax-name">服务治理</span></a></li> <li><a href="##"><span class="ax-name">服务监控</span></a></li> <li><a href="##"><span class="ax-name">服务链路跟踪</span></a></li> </ul> </li> <li> <a href="#" ><span class="ax-legend ax-iconfont ax-icon-me"></span><span class="ax-name">个人中心</span><span class="ax-arrow ax-iconfont ax-icon-right"></s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0