东拼西凑完成一个“前端框架”(1) - 布局

究极死胖兽

2019-12-11

关注关注

前言

在如今”大前端“时代，各种前端框架层出不穷，诸如：

等许多非常优秀的前端框架；本着程序员折腾的精神，于是计划自己去写一套后台的“前端框架”，之所以这个前端框架要用“”，是因为它只是把许多常用的组件经过改造拼接到一起，类似于 AdminLTE;

Start

起个名字 - lsadmin

基于 jQuery

布局

布局参照目前许多流行的后台框架，类似于ant-Design、LayUI，AdminLTE，如下图：

东拼西凑完成一个“前端框架”(1) - 布局

如图我们看到总体的页面分为 侧边栏【头部、菜单】、内容【头部、内容】，几个部分，看代码：

<!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;
        }

看效果：

东拼西凑完成一个“前端框架”(1) - 布局