前言
在如今”大前端“時代，各種前端框架層出不窮，諸如：
等許多非常優秀的前端框架；本着程序員折騰的精神，於是計划自己去寫一套后台的“前端框架”，之所以這個前端框架要用“”，是因為它只是把許多常用的組件經過改造拼接到一起，類似於 AdminLTE;
Start
- 起個名字 - 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