東拼西湊完成一個「前端框架」(1) - 佈局

時間 2020-01-07

標籤東拼西湊完成一個前端框架佈局简体版

原文原文鏈接

前言

在現在」大前端「時代，各類前端框架層出不窮，諸如：html

等許多很是優秀的前端框架；本着程序員折騰的精神，因而計劃本身去寫一套後臺的「前端框架」，之因此這個前端框架要用「」，是由於它只是把許多經常使用的組件通過改造拼接到一塊兒，相似於 AdminLTE;前端

Start

起個名字 - lsadmin

基於 jQuery

佈局

佈局參照目前許多流行的後臺框架，相似於ant-Design、LayUI，AdminLTE，以下圖：git

如圖咱們看到整體的頁面分爲 側邊欄【頭部、菜單】、內容【頭部、內容】，幾個部分，看代碼：程序員

<!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代碼：github

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

看效果：前端框架