究极死胖兽 2019-12-11
在如今”大前端“时代,各种前端框架层出不穷,诸如:
等许多非常优秀的前端框架;本着程序员折腾的精神,于是计划自己去写一套后台的“前端框架”,之所以这个前端框架要用“”,是因为它只是把许多常用的组件经过改造拼接到一起,类似于 AdminLTE;
- 起个名字 - lsadmin
- 基于 jQuery
布局参照目前许多流行的后台框架,类似于ant-Design、LayUI,AdminLTE,如下图:
如图我们看到总体的页面分为 侧边栏【头部、菜单】、内容【头部、内容】,几个部分,看代码:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>首页-欢迎</title> </head> <body> <div class="wrapper"> <section class="ls-layout"> <aside class="ls-layout-slider"> <!--右边菜单栏--> <div class="header"> <!--头部--> </div> <div class="slider-menu"> <!--右边菜单栏--> </div> </aside> <section class="ls-content"> <header> <!--头部--> </header> <main> <!--内容--> </main> </section> </section> </div> </body> </html>
下面是CSS代码:
body { margin: 0; padding: 0; } /*总体布局容器*/ .ls-layout { height: 100vh; width: 100vw; font-size: 12px; margin: 0; padding: 0; display: flex; } /*侧边栏*/ .ls-layout .ls-layout-slider { width: 200px; height: 100vh; border: none; background: #1f242a; box-shadow: 2px 0 6px rgba(0, 21, 41, .35); opacity: 1; z-index: 9; } /*侧边头部*/ .ls-layout .ls-layout-slider .header { height: 50px; background: #2379d6; color: #fff; text-align: center; line-height: 50px; font-size: 28px; overflow: hidden; } .ls-layout .ls-layout-slider .header span { font-size: 24px; } /*内容*/ .ls-layout .ls-content { height: 100vh; flex: 1; position: relative; } /*内容头部*/ .ls-content header { height: 50px; background: #1d7ce3; } /*内容主体*/ .ls-content main { position: absolute; top: 50px; left: 0px; right: 0px; bottom: 5px; }
看效果:
- 配色网站 colorhunt
- 字体图标 font-awesome
- 自定义字体图标库 iconfont