您现在的位置是：网站首页> 编程资料编程资料

使用CSS和Java来构建管理仪表盘布局的实例代码深入浅析CSS3中的Flex布局整理CSS实现动态图片的九宫格布局的实例代码css之display属性之inline-block布局实现详解详解CSS中的flex布局css用Flex布局制作简易柱状图的实现

2023-10-18 450人已围观

简介这篇文章主要介绍了使用CSS和Java来构建管理仪表盘布局的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

最终产品图片

您将要创造的

在这个新教程中，我们将使用CSS和JavaScript来创建响应式管理仪表板布局。要构建它，我们将从WordPress仪表板中借鉴一些想法，例如其可折叠的侧边栏菜单。

在整个教程中，我们将面临许多挑战，但是这些挑战将为我们提供良好的实践技巧，以提高我们的前端技能。

事不宜迟，让我们看一下最终的管理仪表板演示（单击侧边栏底部的“ 折叠”按钮以查看可折叠的导航功能，并查看全屏版本以发挥其响应能力）：

1.从页面标记开始

要开始标记，我们需要一个SVG，一个标题和一个部分：

...
...

SVG精灵

您可能会想到，在任何管理控制台中，我们都需要一堆图标。值得庆幸的是， Envato Elements提供了越来越多的有用矢量图标集合，因此，让我们利用该库并下载这些Trade和Dashboard Icons 。

Envato元素上的贸易和仪表板图标

与其通过img或svg标签将它们直接包含在页面中，不如让我们更进一步以创建SVG精灵。为此，我们将所有图标包装在SVG容器中。该容器应该是隐藏的，因此我们将对其应用display: none 。如果我们不隐藏它，则页面顶部会出现一个很大的空白区域。

每个图标将放置在具有唯一ID和viewBox属性的symbol元素内，该属性取决于图标的大小。然后，只要需要，我们就可以通过调用use元素来呈现目标图标（我将在稍后展示给您看）。

现在，让我们熟悉SVG Sprite所需的标记：

实际上，这就是我们创建内置SVG Sprite所需的全部。

标头

继续我们的管理仪表板布局，让我们看一下页面标题。

在其中，我们将定义一个nav元素，它将用作以下元素的包装：

徽标
折叠按钮，将在移动屏幕上切换菜单
菜单本身将包含菜单链接，两个标题以及折叠/展开按钮。从语义上来说，拥有两个单独的菜单并将标题放在它们外面可能更正确，但是如果您愿意，可以采用不同的方法。

这是宽屏（> 767px）上的样子：

标头结构：

Admin
Pages

注意上面的代码中的两件事：

我们如何使用use元素引用目标图标。
我们添加到切换按钮的ARIA属性（ aria-expanded ， aria-label ， aria-hidden ）。这些属性将帮助我们使组件更易于访问。稍后，我们将讨论如何根据按钮的状态更新其值。

部分

该部分将包含两个嵌套部分。

第1节

在第一部分的内部，我们将放置搜索表单和一些有关当前登录用户的信息（名称，头像和通知）。

这是它在宽屏（> 767px）上的外观：

第一部分的布局

部分结构：


......

同样，请注意，我们向提交按钮添加了一些ARIA属性。

第2节

在第二部分中，仅是为了使演示中充实一些虚拟内容，我们将放置一堆文章占位符。这些通常可能包含表格数据，图表或某种形式的提要。

“最多使用5–7个不同的小部件来创建视图。否则，用户将很难集中精力并获得清晰的概览。” – 塔拉斯Bakusevych

这是它在宽屏（> 767px）上的外观：

根据UX最佳实践，您可能不需要这么多部分

部分结构：

2.定义一些基本样式

准备好我们的管理控制台标记后，我们将继续使用CSS。与往常一样，第一步是指定一些CSS变量和常见的重置样式：

 :root { --page-header-bgColor: #242e42; --page-header-bgColor-hover: #1d2636; --page-header-txtColor: #dde9f8; --page-header-headingColor: #7889a4; --page-header-width: 220px; --page-content-bgColor: #f0f1f6; --page-content-txtColor: #171616; --page-content-blockColor: #fff; --white: #fff; --black: #333; --blue: #00b9eb; --red: #ec1848; --border-radius: 4px; --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075); } * { padding: 0; margin: 0; box-sizing: border-box; } ul { list-style: none; } a, button { color: inherit; } a { text-decoration: none; } button { background: none; cursor: pointer; } input { -webkit-appearance: none; } button, input { border: none; } svg { display: block; } body { font: 16px/1.5 "Lato", sans-serif; }

注意：为简单起见，我不会逐步学习本教程中的所有 CSS规则。这里有将近400行CSS。如果需要，可以通过单击演示项目的CSS选项卡将其全部选中。

3.定义主仪表板样式

至此，我们准备专注于页面样式。

设置标题

标头将是固定位置元素。其宽度将为220px，其高度等于视口高度。如果其内容超过视口高度，则将显示一个垂直滚动条。

nav元素的行为将是高度至少为100％的flex容器。请记住，它的直接子对象是三个：

徽标移动菜单切换按钮，和菜单。

切换按钮仅在小屏幕（<768px）上可见。这是我们需要的样式：

 /*CUSTOM VARIABLES HERE*/ .page-header { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; padding-top: 20px; width: var(--page-header-width); color: var(--page-header-txtColor); background: var(--page-header-bgColor); } .page-header nav { display: flex; flex-direction: column; min-height: 100%; } .page-header .toggle-mob-menu { display: none; }

提示：如果您希望覆盖整个页面高度的绝对定位页眉，请添加以下样式：

 body { position: relative; } .page-header { position: absolute; top: 0; left: 0; height: 100%; /*Comment these styles*/ /*position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: auto;*/ }

菜单样式

菜单将用作flex容器，我们将为其指定flex: 1 ，以便其展开并覆盖整个父级高度。

最后一个菜单项将被设置为margin-top: auto因为它应该位于菜单的最底部。当标题滚动条不出现时，此行为将更加清楚。要对其进行测试，请尝试删除一些菜单项，或在高屏幕上查看演示。

菜单中的链接和按钮也将充当弹性容器，其内容（文本和图标）应垂直对齐。

与其他菜单元素相比，菜单标题要小一些。此外，我们将增加其字符之间的间距。

这是菜单样式的一部分：

 /*CUSTOM VARIABLES HERE*/ .page-header .admin-menu { display: flex; flex-direction: column; flex-grow: 1; margin-top: 35px; } .page-header .admin-menu li:last-child { margin-top: auto; margin-bottom: 20px; } .page-header .admin-menu li > * { width: 100%; padding: 12px 15px; } .page-header .admin-menu a, .page-header .admin-menu button { display: flex; align-items: center; font-size: 0.9rem; transition: background 0.2s, color 0.2s; } .page-header .admin-menu .menu-heading h3 { text-transform: uppercase; letter-spacing: 0.15em; font-size: 12px; margin-top: 12px; color: var(--page-header-headingColor); }

页面内容样式

请记住， .page-content部分包含两个子部分。

此部分将放置在距视口左侧220px的位置。另外，我们将其width: calc(100% - 220px) 。请注意，它的left属性值等于标题宽度。

其样式：

 /*CUSTOM VARIABLES HERE*/ .page-content { position: relative; left: var(--page-header-width); width: calc(100% - var(--page-header-width)); min-height: 100vh; padding: 30px; color: var(--page-content-txtColor); background: var(--page-content-bgColor); }

搜索和用户样式

另外，请记住， .search-and-user部分包含两个元素：搜索表单和.admin-profile 。

为了进行布局，我们将使用CSS Grid。搜索表单将覆盖全部可用空间，并且与其兄弟姐妹之间会有50px的间距。两个兄弟将垂直对齐。

表单内的提交按钮将处于绝对位置。它只会包含一个装饰性图标，因此我们需要一个ARIA属性，以允许屏幕阅读器对其进行解释并使其可访问。

包含两个元素的.admin-profile将充当具有垂直居中内容的flex容器。 badge（counter）元素将以水平和垂直居中的内容绝对定位在其父对象内部。

这是此部分所需样式的一部分：

/*CUSTOM VARIABLES HERE*/ .search-and-user { display: grid; grid-template-columns: 1fr auto; grid-column-gap: 50px; align-items: center; background: var(--page-content-bgColor); margin-bottom: 30px; } .search-and-user form { position: relative; } .search-and-user form button { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); } .search-and-user .admin-profile { display: flex; align-items: center; } .search-and-user .admin-profile .notifications { position: relative; } .search-and-user .admin-profile .badge { display: flex; align-items: center; justify-content: center; position: absolute; top: -10px; right: -3px; width: 18px; height: 18px; borde

上一篇：CSS如何匹配到多个class的示例代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

下一篇：使用CSS的clip-path属性实现不规则图形的显示使用css实现特殊标志或图形css如何绘制特殊图形的方法示例详解常用css样式(布局)详解CSS3中常用的样式【基本文本和字体样式】编程式处理Css样式的示例代码使用CSS伪元素控制连续几个元素的样式方法纯CSS3 gradient属性制作36种漂亮的html网页渐变按钮样式css样式常见图形效果展示的实例代码

您现在的位置是：网站首页> 编程资料编程资料

使用CSS和Java来构建管理仪表盘布局的实例代码深入浅析CSS3中的Flex布局整理CSS实现动态图片的九宫格布局的实例代码css之display属性之inline-block布局实现详解详解CSS中的flex布局css用Flex布局制作简易柱状图的实现

相关内容

点击排行

本栏推荐

猜你喜欢