東拼西湊完成一個後臺」前端框架「 (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>...