东拼西凑完成一个“前端框架” - 布局
Posted 顺势而为
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了东拼西凑完成一个“前端框架” - 布局相关的知识，希望对你有一定的参考价值。
前言
在如今”大前端“时代，各种前端框架层出不穷，诸如：
等许多非常优秀的前端框架；本着程序员折腾的精神，于是计划自己去写一套后台的“前端框架”，之所以这个前端框架要用“”，是因为它只是把许多常用的组件经过改造拼接到一起，类似于 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
以上是关于东拼西凑完成一个“前端框架” - 布局的主要内容，如果未能解决你的问题，请参考以下文章