文档的源代码地址，需要的下载就可以了（访问密码：7567）

https://url56.ctfile.com/f/34653256-527823386-04154f

正文：

页面主体部分

设置测试样式

查看页面效果

需要一个上左右的10px的内边距

添加文本

样式更改

查看效果

接下来column 列容器，分三列，占比 3：5：3

首先是“父亲” ——mainbox添加flex属性

然后主体添加三个部分的“孩子”

分别分成3：5：3

接下来准备一个：公共面板模块 panel

属性设置

1像素的 1px solid rgba(25, 186, 139, 0.17) 边框

有line.jpg 背景图片

padding为 上为 0 左右 15px 下为 40px

下外边距是 15px

查看效果

利用panel 盒子 before 和after 制作两个角 大小为 10px 线条为 2px solid #02a6b5

查看效果

下面的两个角

添加属性

查看效果

完成一个柱形图 bar 模块(布局)

标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px

图标内容模块 chart 高度 240px

以上可以作为panel公共样式部分

样式布置

查看效果

其它模块复制就可以了

查看效果

最新文章

1. [Java] Java解析XML格式Response后组装成Map
2. 在IE6下使用filter设置png背景
3. ImageSwitcher 右向左滑动的实现方式
4. php函数整理
5. XSS初体验
6. Http GET、Post方式的请求总结
7. CENTOS6.4安装lxml失败
8. 【OGG】OGG基础知识整理
9. accp8.0转换教材第11章JAjax加护扩展理解与练习
10. hdu5863 cjj's string game
11. 20165223 《JAVA程序设计》第四周学习总结
12. MVC5干货篇，目录和路由
13. 背水一战 Windows 10 (65) - 控件（WebView）: 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容
14. 【前端】JS文本比较插件
15. 运行VUE的前端项目
16. 面试题41：和为s的两个数字 || 和为s的连续正数序列
17. lua——元表、元方法、继承
18. Github如何上传代码？
19. java通过IO流复制文件
20. hdu 1007 Quoit Design(分治法求最近点对)

热门文章

1. C# 获取当前目录的父级目录
2. 04 - Vue3 UI Framework - 文档页
3. java多线程2：Thread中的方法
4. Mybatis-plus报Invalid bound statement (not found)错误
5. 学习笔记--html篇（1）
6. ASP.NET WebApi 依赖 SAP Connector dll 报错
7. 转换…Transform…（Power Query 之 M 语言）
8. HSPICE 电平触发D触发器仿真
9. vscode提示提示安装似乎损坏，请重新安装
10. 反射hasattr; getattr; setattr; delattr