制作后台管理系统首页
(作者:李文成,撰写时间:2019年5月14日)
先看下成品

新建一个画布1366×768像素,然后使用矩形工具(U)颜色为:#2f323b;将顶部栏部分框选出来然后将一些后台网页中基本的设置放入顶部栏(也可以放到其他地方),字号的话是:30px;左上方是一个LOGO跟这个管理系统的名称,右上方的话是一个登录人员的头像和名称。
然后再做导航栏,左边导航栏部分也是使用矩形工具(U)将它的背景颜色给框选出来颜色为:#3b3f4a;然后将数据名称打上去间距的话是1.41厘米,也可以自己调整,字号是:24px;后面的三角形的是自己的也可以去自定义工具里面找,第一个三角形颜色为:#ff0000;然后复制出来排好,间距是1.66厘米。


再做内容部分,先做一个搜索栏。使用矩形工具(U)做一个背景,颜色为:#d9e0f4;然后将搜索栏的内容使用横排文字工具(T)打上去,字体颜色为:#666666;搜索后面的背景一个圆角矩形,颜色为:#aa5aed;字体颜色为:#ffffff;标题栏的话背景颜色为:#bb3b3b;字体颜色为:#d1bdce;

再做图表部分,图表字体颜色和左边跟下边那两条线颜色为:#666666;图表中间那些线颜色为:#63acf7;再把所需的数据以线的方式放入图表,使用的工具为:钢笔工具,这些内容颜色为:#070dfe;#07fe70;#fe0707;分别对应的是:下载人数、在线人数、不在线人数。然后摆放好,这张图就完成了,做出来的成品跟第一张差不多。

制作后台管理系统首页相关推荐

  1. 后台管理系统--首页及登录认证

    我们首先要学习UI组件的布局: 当你仔细阅读过后你会看明白以下代码! Container 布局容器 | Element Plus <template><el-container> ...

  2. 电商后台管理系统——首页基本实现

    侧边栏实现与基本右侧welcome实现 1.home.vue组件已建立好并配置好相关路由,路由规则,开始对home组件进行布局添加样式 <el-container>:外层容器.当子元素中包 ...

  3. React后台管理系统-首页Home组件

    1.Home组件要显示用户总数.商品总数和订单总数,数据请求后端的 /manage/statistic/base_count.do接口,返回的是 this.state = {            u ...

  4. Axure高保真web端后台管理系统/垃圾回收分类系统/垃圾回收高保真原型设计 /垃圾分类后台管理系统/垃圾回收分类平台//垃圾回收分类智慧管理系统/订单管理/财务管理/系统管理/库存管理/设备管理

    Axure高保真web端后台管理系统/垃圾回收分类系统/垃圾回收高保真原型设计 /垃圾分类后台管理系统/垃圾回收分类平台//垃圾回收分类智慧管理系统/订单管理/财务管理/系统管理/库存管理/设备管理 ...

  5. 垃圾回收分类系统、垃圾回收高保真原型设计 、垃圾分类后台管理系统、垃圾回收分类平台、垃圾回收分类、智慧管理系统、订单管理、财务管理、系统管理、库存管理、设备管理、Axure原型、rp原型

    Axure高保真web端后台管理系统.垃圾回收分类系统.垃圾回收高保真原型设计 .垃圾分类后台管理系统.垃圾回收分类平台.垃圾回收分类.智慧管理系统.订单管理.财务管理.系统管理.库存管理.设备管理 ...

  6. 淘淘商城第20讲——展示后台管理系统首页面

    我们前面做了那么多准备工作不是白做的,大家如果坚持到现在,真的值得给自己一个拥抱!现在我们就来开始着手处理后台管理系统. 首先,大家需要整合淘淘商城的后台管理系统静态页面,你可能想问这些静态页面怎么获 ...

  7. 使用react全家桶制作博客后台管理系统

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...

  8. web-前端之后台管理系统模板首页

    这个是自己参照模板写出来的后台管理系统模板,只是一个前端框架 其中包含很多个界面,后面会陆续发出来,请往下看...... ![这是首页的制作](https://img-blog.csdn.net/20 ...

  9. CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)

    CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...

  10. CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)...

    CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...

最新文章

  1. (九)单片机串行口 内部结构的讲解 01
  2. K8s 1.18 正式 release | 云原生生态周报 Vol. 43
  3. 数字化营销关键点:如何做好深度内容策略
  4. 英雄传说服务器维护中,英雄传说:星之轨迹 正统《轨迹》手游无法连接服务器是什么原因...
  5. ospf工作原理_OSPF动态路由配置经典案例
  6. Lecture 14 Competive Analysis
  7. crc16码表的使用_查表法计算CRC16校验值
  8. javascrpt 继承
  9. CYQ.Data 正式支持 DotNET Core 版本发布
  10. 除自身以外数组的乘积leetcode 238
  11. 精译丨贝莱德掌舵人拉里 · 芬克:华尔街是什么
  12. Html鼠标右键菜单代码
  13. 移动端app 文档交接模版
  14. win10没有realtek高清晰音频管理器_史上最稳定的win10版本,四大更新内容强势来袭,你敢升级吗?...
  15. php奖学金系统,java/php/net/pythont奖助学金管理系统设计
  16. [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
  17. 计算机专业在房管局,计算机故障 昨天房产局无法办过户
  18. 分析复联系列电影台词,看看每个英雄说得最多的词是什么
  19. 科技 人文_以人文个性化应对认识论的不公正
  20. JavaScript 的物理引擎对比

热门文章

  1. 计算机二级excel设置宏,Excel2013中为宏指定快捷键的方法
  2. 单机魔兽世界服务器显示不兼容,大芒果单机魔兽世界不能登陆怎么办?
  3. 计算机软考答题卡填涂格式,2020年计算机软件水平考试答题卡填涂技巧
  4. Maya材质球与渲染基础--Redshift,Arnold,Xgen
  5. Python:寻找回文素数
  6. 微信公众平台 客服接口-发消息
  7. 病毒木马查杀实战第011篇:QQ盗号木马之专杀工具的编写
  8. python局域网文件互传
  9. 小学计算机应用到英语课教案,信息技术助力小学英语课堂教学妙招
  10. 软件测试哪些专业需要学习,软件测试工程师的入门级要求有哪些?