前端页面的制作

因为前一段时间学习了数据库，学校老师要求制作一个有关数据库的管理系统，我看了一下要求的题目，其中最合适的就是商店管理系统（就是各大培训机构必做的电商系统）。这篇博客是为了记录我的前端页面的制作流程！

LayUI下载

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

上面的那段话是我从layUI的官网上面copy的，不过layUI确实是一个十分好用的前端界面框架，而且下载和使用也是是十分快捷方便的。

进入layUI官网下载最新的layUI压缩包

下载完解压后是一个layUI的测试界面，我们可以打开看一下layUI的界面是十分清新，让人看起来特别舒爽！

我们要使用的就是下载的layui文件夹下的这三个文件

准备我们的工程

我们在自己的工作空间里面新建一个文件夹商店管理系统，并且把刚刚的layui文件夹复制到商店管理系统中。

现在开始我们的页面制作！

emmmm，我想要的效果是这样的，我使用我的画图工具，开始展示我的美术功底！

没错，这就是一个经典的后台大布局，layui也提供了一些很方便的东西来实现这个大布局！

基本结构的搭建

在index中引入我们的layui框架

<link rel="stylesheet" href="/layui/css/layui.css"  media="all">
<!-- 其他 -->
<script src="layui/layui.js" charset="utf-8"></script>

搭建后台大布局

在layui中有这样几个样式，可以专门用来搭建这类的布局的

<div class="layui-layout layui-layout-admin"><div class="layui-header"><!-- 页面的头部 -->header</div><div class="layui-side layui-bg-black"><!-- 页面的侧边栏 -->sider</div><div class="layui-body"><!-- 页面的主体内容 -->body</div><div class="layui-footer"><!-- 页面的底部固定栏 -->footer</div></div>

很简单的几个div就可以实现这种布局

往布局里面填充内容

header中的内容

header中有LOGO，还有头像以及一个下拉框。
LOGO位于header的左边，与之对应的是一个layui-logo样式
代码实现 <div class="layui-logo">SHOOYE</div>
header右边有一个头像，头像还可以实现下拉的功能
使用一个右部的ul就可以实现这种效果
代码实现

<ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="" class="layui-nav-img"><span>坚持的小白</span><i class="layui-icon layui-icon-down layui-nav-more"></i></a><dl class="layui-nav-child layui-anim layui-anim-upbit"><dd><a href="">个人信息</a></dd><dd><a href="">退出登录</a></dd></dl></li></ul>

实现效果

ok，现在我们的header就实现了

sider侧边栏的实现

对于侧边栏的效果，只需要使用layui-nav layui-nav-tree来修饰ui即可
对于单独的item使用layui-nav-item 即可
代码实现

<ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"><a href="">item1</a></li><li class="layui-nav-item"><a href="">item2</a></li><li class="layui-nav-item"><a href="">item3</a></li><li class="layui-nav-item"><a href="">item4</a></li><li class="layui-nav-item"><a href="">item5</a></li></ul>

实现效果：

主体内容的实现

这个实现留到我们以后来根据需要来填充！

底部栏的实现

底部栏只有一个简单的文字即可
如果想要加上logo或者其他的，可以使用上面的layui-logo即可

现在一个基本的页面布局就实现了，我会把完整的代码粘贴到下面以便日后的使用，也欢迎大家进行复制！
对于完整的代码里面，我新增了一些其他的功能，这样大家可以根据自己的需要进行删除和修改！

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="layui/css/layui.css" media="all"></head><body><div class="layui-layout layui-layout-admin"><!-- 页面的头部 --><div class="layui-header"><!--顶部logo--><div class="layui-logo">SHOOYE</div><!--顶部左边栏目--><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="javascript:;">item1</a></li><li class="layui-nav-item"><a href="javascript:;">item2</a></li><li class="layui-nav-item"><a href="javascript:;">item3</a></li><li class="layui-nav-item"><a href="javascript:;">item4</a></li><li class="layui-nav-item"><a href="javascript:;"><span>item5</span><i class="layui-icon layui-icon-down layui-nav-more"></i></a><dl class="layui-nav-child layui-anim layui-anim-upbit"><dd><a href="">menu1</a></dd><dd><a href="">menu1</a></dd></dl></li></ul><!--顶部右边栏目--><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="" class="layui-nav-img"><span>坚持的小白</span><i class="layui-icon layui-icon-down layui-nav-more"></i></a><dl class="layui-nav-child layui-anim layui-anim-upbit"><dd><a href="">个人信息</a></dd><dd><a href="">退出登录</a></dd></dl></li></ul></div><div class="layui-side layui-bg-black"><!-- 页面的侧边栏 --><ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"><a href="">item1</a></li><li class="layui-nav-item"><a href="">item2</a></li><li class="layui-nav-item"><a href="">item3</a></li><li class="layui-nav-item"><a href="">item4</a></li><li class="layui-nav-item"><a href="">item5</a></li><li class="layui-nav-item"><a class="" href="javascript:;">item6<i class="layui-icon layui-icon-down layui-nav-more"></i></a><dl class="layui-nav-child"><dd><a href="">menu 1</a></dd><dd><a href="">menu 2</a></dd><dd><a href="">menu 3</a></dd></dl></li></ul></div><div class="layui-body"><!-- 页面的主体内容 -->body</div><div class="layui-footer"><!-- 页面的底部固定栏 -->底部栏目</div></div><script src="layui/layui.js" charset="utf-8"></script>
</body></html>

最终的结构样式

课程设计-商店管理系统（一）----前端页面的制作（一）相关推荐

课程设计-商店管理系统（三）----前端页面的制作（三）
前端页面制作(三) 之前的博文课程设计-商店管理系统(一)----前端页面的制作(一) 课程设计-商店管理系统(二)----前端页面的制作(二) 进出货查询我们现在要制作进出货信息查询界面,这个界 ...
课程设计-商店管理系统（二）----前端页面的制作（二）
前端页面制作(二) 之前的博文课程设计-商店管理系统(一)----前端页面的制作(一) 看了老师发的课程设计要求,我设置准备制作以下功能商品查询: 该界面可以进行查询:商品序号.商品编码.商品名称 ...
课程设计-商店管理系统（四）----数据库的建立
数据库的建立之前的博文课程设计-商店管理系统(一)----前端页面的制作(一) 课程设计-商店管理系统(二)----前端页面的制作(二) 课程设计-商店管理系统(三)----前端页面的制作(三) ...
【课程设计】数据库C#课程设计教务处管理系统 vs2017和sql server2014制作
数据库C#课程设计教务处管理系统 vs2017和sql server2014制作前言一.系统模型图二.数据库设计 1.E-R图 2.关系模式图 3.建表三.用户界面设计四.部分源代码五. ...
RFID课程设计-图书管理系统用户端设计
RFID课程设计-图书管理系统用户端设计课程设计题目课程设计任务内容题目设计基本原理NFC开发概述标签调度系统如何将 NFC 标签映射到 MIME 类型和 URI如何将 NFC 标签分发到应用在 An ...
软件工程课程设计“作业管理系统”的总结和期望
目录一.软件工程课程设计"作业管理系统"的总结和期望该系统研究的意义功能概述 web网上作业管理系统的实现注册与登录功能的实现作业提交功能实现教师批改作业的功能实现总 ...
教职工员工管理MySQL实训_数据库课程设计---教职工管理系统
数据库课程设计---教职工管理系统第 1 页目录一.需求与功能分析 2二.系统总体框架 3三.功能设计 3四.类的设计与分析 4五.数据库表结构设计 4六.特色算法分析 5七.功能测试 6-10八 ...
python通讯录管理系统设计_数据结构课程设计-通讯录管理系统（C语言版）
##数据结构课程设计-通讯录管理系统一,前言自从上次C语言课设写完后,这次数据结构课设就写的游刃有余了,很快啊,不足三天就写完了它(年轻人不讲武德),如果你认真看过我之前写的C语言课程设计-球队管 ...
c++课程设计——美发店管理系统
C++课程设计--美发店管理系统美发店管理系统功能介绍概要设计详细设计源程序清单报告下载地址美发店管理系统功能介绍用户可以在主页面选择自己的身份(顾客/管理员),或者退出系统.如果选 ...

课程设计-商店管理系统（一）----前端页面的制作（一）