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

时间 2019-11-08

标签东拼西凑完成一个后台前端框架布局繁體版

原文原文链接

　　在现在”大前端“时代各类框架层出不穷：css

　　等等还有其它不少优秀的框架，想一想几年前的时候用的都是 easy-ui ,ext-js 之类的框架；或许是习惯了，或许是熟悉了，因此可是这些框架用起来很方便，可是想本身作些改动就比较麻烦了，因而便有了本身整一个“框架”用用；html

　　废话很少说下面开始：前端

咱们以Ant Design Pro为例，大部分的框架布局都是如图布局，废话很少说，下面咱们开搞：vue

从整体布局开始；git

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta name="viewport" content="width=device-width" />
 6     <title>首页-欢迎</title>
 7 </head>
 8 
 9 <body>
10     <div class="wrapper">
11         <section class="ls-layout">
12             <aside class="ls-layout-slider">
13                 <!--右边菜单栏-->
14             </aside>
15             <section class="ls-content">
16                 <header>
17                     <!--头部-->
18                 </header>
19                 <main>
20                     <!--内容-->
21                 </main>
22             </section>
23         </section>
24     </div>
25 </body>
26 </html>

下面是CSS代码：github

 1     <style type="text/css">
 2         body {
 3             margin: 0;
 4             padding: 0;
 5         }
 6         
 7         .ls-layout {
 8             height: 100vh;
 9             width: 100vw;
10             font-size: 12px;
11             margin: 0;
12             padding: 0;
13             display: flex;
14         }
15         /*侧边栏*/
16         
17         .ls-layout .ls-layout-slider {
18             width: 200px;
19             height: 100vh;
20             border: none;
21             background: #1f242a;
22             box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
23             -webkit-transition: width 300ms ease;
24             transition: width 300ms ease;
25             opacity: 1;
26             z-index: 9;
27         }
28         
29         .ls-layout .ls-content {
30             height: 100vh;
31             flex: 1;
32             position: relative;
33         }
34         
35         .ls-content header {
36             height: 50px;
37             background: #1d7ce3;
38         }
39         
40         .ls-content main {
41             position: absolute;
42             top: 50px;
43             left: 0px;
44             right: 0px;
45             bottom: 5px;
46         }
47     </style>

别问我配色怎么搞，推荐这个 https://colorhunt.co/ ，预览图：web

侧边栏的头部还差了点儿，只须要加个头就能够了app

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

1       ...　 <aside class="ls-layout-slider">
2                 <div class="header">
3                     <span>这里是Title</span>
4                 </div>
5                 <!--右边菜单栏-->
6             </aside>...

效果预览：框架

有点意思 ~ iview

接下来加上icon、收起动画和左侧导航菜单；

转载请注明出处 https://www.cnblogs.com/xinwang/articles/11721400.html ~