使用 HTML5、CSS3 和 JavaScript 的单页 CRM 管理仪表板

胡萝卜套件-管理-用户界面

引言和动机

我在这里发帖已经有一段时间了。我忙着完成我的学士学位，幸运的是，我于2021年11月26日以一等荣誉毕业。在这段时间里，我决定尝试一下纯CSS3和原生JavaScript。我几乎每次做项目都会用到框架。由于我最擅长实践，所以我决定用纯CSS3构建一个单页的客户关系管理（CRM）平台，并添加一些精妙的动画。

特征

管理仪表板具有以下功能：

• 简洁且响应迅速的设计
• 使用纯 CSS3 实现的微妙动画

来源

该项目的完整代码在线，并且对于私人用途和商业用途都是完全免费的。

它也托管在github 页面上。

一些实施细节

CSS3 弹性框和网格系统被大量使用，其中弹性框更为普遍。

标题

.carrotsuite-nav是一个弹性容器，作为标题的基线。标题元素主要由Fontawesome图标组成。网站的徽标包装器采用绝对定位，方便定位。

主要的

.main被制成一个网格容器，其列由...制成28rem 2fr。

第一列是固定的，.sidebar它.menu被设计成一个弹性容器，以确保图标及其对应的文本水平对齐。我们用代码库中仅有的几行 JavaScript 代码，嵌入了一个精妙的动画，当视口折叠到某个断点时，它只会显示图标，而文本则作为图标的标题。

.page-content占据了剩余的网格列，其后是其他对流样式。唯一值得注意的是当鼠标悬停在Fontawesome图标上时，图标.dropbtn会旋转的动画。 arrow-up-180deg

结论

这个项目并不是那么花哨，但它确实帮助我复习了那些缺失的基础知识。

结尾

喜欢这篇文章吗？我是一名软件工程师和技术作家，正在积极寻找新的机会，尤其是在网络安全、金融、医疗保健和教育等领域。如果您认为我的专业知识符合您团队的需求，欢迎随时联系我们！您可以在 LinkedIn：LinkedIn和 Twitter：Twitter上找到我。

如果您发现这篇文章有价值，请考虑与您的网络分享以帮助传播知识！