控制body、html等元素的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Arial', sans-serif;
    /*background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);*/
    background-image: url('./background.jpg');  /* 背景图片的路径 */
    background-repeat: no-repeat;            /* 禁止背景图片重复 */
    background-size: cover;                  /* 背景图片适应整个容器 */
    background-position: center center;      /* 背景图片居中 */
    color: #ffffff;
    overflow: auto;
}

需要设置某一个大类，如body、header、header下的nav参数
可以使用如：

1
2
3
4
5
6
7
8
9
10
11
body {

}

header {

}

header nav {

}

接下来解释body, html {}中的参数

  1. margin: 0;：去除元素的默认外边距，使得页面四周不会留白

  2. padding: 0;：去除元素默认内边距，使得布局从页面左上角开始

  3. width: 100%; height: 100%;：设置元素的宽高为浏览器窗口的100%，确保整个页面的宽高始终与浏览器的宽度相等，并能占据整个页面。

  4. font-family: 'Arial', sans-serif;：设置字体类型，如果系统中没有Arial类型，则使用另外的sans-serif类型。

  5. background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);：

    • linear-gradient是一种CSS渐变效果，用于创建平滑的颜色过度效果。
    • 135deg：表示渐变的角度，135deg代表135°，从左上角到右下角形成渐变效果
    • #0f0c29，#302b63，#24243e：分别是深蓝色、蓝紫色和紫色。在这三种颜色之间平滑过渡，形成一种科幻风格的渐变背景。

  6. color: #ffffff;：设置文本颜色，#ffffff代表白色。

  7. overflow: auto;：自动处理html、body范围的内容。用于防止直接出现右端滚动条，影响视觉感官。

设置header

1
2
3
<header>
    <h1>XXXXX系统入口</h1>
</header>
1
2
3
4
5
6
header {
    text-align: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

header{}中的参数解释：

  1. text-align: center;：将元素内部的文本对齐

  2. padding: 20px;：设置元素内边距，设置一个值，就代表设置上下左右的距离。如果设置两个值padding: 20px 20px;代表设置上下、左右的距离。

  3. background-color: rgba(0, 0, 0, 0.6);：设置背景颜色，并附加透明效果

  4. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);：设置四周阴影效果，使其具有立体感，层次感。

    • 0：水平偏移量，正值表示向右移动，负值表示向左移动。这里是 0，表示阴影与元素在水平方向对齐。
    • 2px：垂直偏移量，正值表示向下移动，负值表示向上移动。这里是 2px，表示阴影在元素下方显示2个像素的偏移。
    • 10px：模糊半径，表示阴影的模糊程度。较大的值会使阴影更加模糊和扩散。这里设置为 10px，表示阴影边缘会有一定的模糊效果
    • rgba(0, 0, 0, 0.5)：阴影颜色。带有50%的透明度。这是为了使阴影不显得过于浓重，而是带有一定的透光感。

实测box-shadow并没有什么效果。

设置header h1

1
2
3
4
5
6
7
header h1 {
    font-size: 40px;
    margin: 0;
    letter-spacing: 5px;
    text-shadow: 0 0 15px #00e6e6, 0 0 20px #ff00ff;
    animation: glow 2s ease-in-out infinite alternate;
}

header h1{}中的参数解释：

  1. font-size: 40px;：设置字体的大小

  2. margin: 0;：设置上下左右的边距为0

  3. letter-spacing: 5px;：设置标题中每个字的间距为5px

  4. text-shadow: 0 0 15px #00e6e6, 0 0 20px #ff00ff;：文本添加多重阴影效果

    • 语法格式为 text-shadow: 水平偏移 垂直偏移 模糊半径 阴影颜色;在此demo下设置了两个，它们会产生多重阴影。

  5. animation: glow 2s ease-in-out infinite alternate;：为文本应用动画效果，使其阴影随着时间变化而动态闪烁。

    • glow：指向下面定义的keyframes动画名称
    • 2s：动画时长，播放一次需要2s
    • ease-in-out：动画曲线效果，动画开始、结束很快，中间很慢。类似的效果还有linear（匀速变化）、ease-in（开始慢，然后逐渐加速）、ease-out（开始快，然后逐渐减速）
    • infinite：无限循环播放
    • alternate：每次循环的时候会切换方向

设置keyframes

1
2
3
4
5
6
7
8
@keyframes glow {
    0% {
        text-shadow: 0 0 5px #00e6e6, 0 0 10px #ff00ff;
    }
    100% {
        text-shadow: 0 0 20px #00e6e6, 0 0 30px #ff00ff;
    }
}

keyframes中的参数解释：

  1. @keyframes：这是CSS中的一种规则，用于创建帧动画。它定义了一个动画的关键帧序列，从 0% 到 100% 的不同状态，表示动画的起点、终点或中间状态。
  2. glow：这是自定义动画的名称，可以用在 animation 属性中引用（如 animation: glow 2s ease-in-out infinite alternate;）。
  3. 0%：表示动画的开始状态（即 0% 时的样式）。
    • text-shadow: 0 0 5px #00e6e6, 0 0 10px #ff00ff;
    • 两种颜色的阴影分别设置为较小的模糊半径（5px 和 10px），表示此时阴影看起来很弱。
  4. 100%：表示动画的结束状态（即 100% 时的样式）。
    • text-shadow: 0 0 20px #00e6e6, 0 0 30px #ff00ff;
    • 模糊半径变大（20px 和 30px），表示阴影的发光效果更强、更加柔和和模糊。

设置nav

设置网页导航栏样式。

1
2
3
4
5
6
7
nav {
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

nav中的参数解释：

  1. border-top: 1px solid #444：为 nav 元素的顶部设置一个宽度为 1px 的实线边框，并定义其颜色为 #444（深灰色）。

  2. border-bottom: 1px solid #444;：为 nav 元素的底部设置一个宽度为 1px 的实线边框，并定义其颜色为 #444（深灰色）。

设置nav a

设置导航栏中的网站属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav a {
    display: inline-block;
    margin: 0 15px;
    padding: 15px 25px;
    font-size: 18px;
    color: #00e6e6;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
}

nav a:hover {
    border-color: #00e6e6;
    box-shadow: 0 0 10px #00e6e6, 0 0 20px #ff00ff;
}

nav a中的参数解释：

  1. display: inline-block;：将链接<a>设置为行内块级元素，具体效果看2.8 元素展示格式

  2. margin: 0 15px;：设置上下、左右的外边距离。

  3. padding: 15px 25px;：设置上下、左右的内边距离

  4. font-size: 18px;：设置字体大小

  5. color: #00e6e6;：设置字体颜色

  6. text-decoration: none;：去除链接文本的默认下划线

  7. border: 2px solid transparent;：为链接设置透明的边框

    • 2px：表示边框宽度为2像素。
    • solid：表示边框样式为实线。
    • transparent：表示边框颜色为透明。

  8. border-radius: 5px：设置按钮圆角效果

  9. transition: all 0.3s ease;：设置链接在状态改变（如 hover）时的过渡效果
    transition 属性用于控制元素在样式变化时的过渡效果。
    all：表示所有属性都使用此过渡效果。
    0.3s：表示过渡持续时间为 0.3 秒。
    ease：表示过渡效果为缓动模式。

  10. nav a:hover;：当鼠标放在链接上的时候，会在 0.3 秒(由上面的transition所设计的)内实现：

    • border-color: #00e6e6;：边框颜色变为亮青色。
    • box-shadow: 0 0 10px #00e6e6, 0 0 20px #ff00ff;：为链接按钮添加青色和紫色的发光阴影效果，增强按钮的视觉吸引力。

设置自定义名称dashboard

对于此类自定义的class可以使用如下设置方式。

1
2
3
<div class="dashboard">
    ...
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
/*
.类名称 {

}
*/
.dashboard {
    display: : flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 50px 20px;
    gap: 20px;
}

dashboard中的参数解释：

  1. display: flex;：将 .dashboard 容器设置为 弹性布局。

【注】display: flex; 与 display: inline-block; 的主要区别

特性 display: flex; display: inline-block;
排列方式 水平方向和垂直方向均可控制 仅能进行水平方向排列
对子元素的控制 可以轻松控制子元素的对齐、分布、伸缩 无法轻松控制子元素的对齐和分布
响应式布局 支持动态调整子元素尺寸，适合响应式布局 需要通过媒体查询来手动控制子元素的大小
是否占据一行 默认情况下不占据一整行，但可以轻松通过 flex 属性进行调整 inline-block 元素本身不会占据整行，但父容器可能会换行
子元素换行 可以通过 flex-wrap 实现多行排列 如果父级元素宽度不足，则会自动换行
空白字符影响 不受空白字符影响 会受 HTML 源代码中的空白字符影响
布局复杂度 可以轻松实现复杂布局（如等间距、居中、分散） 适用于较简单的水平排列
兼容性 支持主流浏览器，但在旧版浏览器中支持不佳（如IE10及以下） 兼容所有主流浏览器

  1. justify-content: center;：设置 主轴 上的子元素（卡片或图表）的排列方式，使子元素在主轴方向上 居中对齐。

    • justify-content 用于控制 弹性项目 在主轴（通常是水平方向）上的对齐方式。
    • 设为 center 时，表示所有 .dashboard 容器内的子元素（如卡片）在水平方向居中排列。

  2. align-items: center;：设置 交叉轴 上的子元素（卡片或图表）的排列方式，使子元素在交叉轴方向上 垂直居中对齐。

    • 效果同justify-content，只不过用于垂直居中对齐。

  3. flex-wrap: wrap;：允许 .dashboard 容器内的子元素在 主轴方向（通常是水平） 超出容器.dashboard宽度时自动换行。

  4. margin: 50px 20px;：设置 .dashboard 容器与其外部元素之间的 外边距。

  5. gap: 20px;：设置 .dashboard 容器中 子元素之间的间距。

设置dashboard-card

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.dashboard-card {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dashboard-card h3 {
    margin: 10px;
    text-align: center;
    font-size: 22px;
}

dashboard-card中的参数解释

  1. box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);：为卡片添加 阴影效果，提升立体感。

    • 0：水平偏移量（horizontal offset），表示阴影相对于卡片在水平方向上的位移。这里为 0，表示阴影没有水平偏移。
    • 0：垂直偏移量（vertical offset），表示阴影在垂直方向上的位移。这里为 0，表示阴影没有垂直偏移。
    • 20px：模糊半径（blur radius），表示阴影的模糊程度。值越大，阴影越模糊和扩散。这里的 20px 表示阴影在卡片四周呈现柔和的扩散效果。
    • rgba(255, 255, 255, 0.2)：阴影的颜色，使用 rgba 表示带有透明度的白色阴影（20%的不透明度）。

  2. position: relative;：设置卡片的 定位上下文。

  3. overflow: hidden;：隐藏超出卡片边界的内容。

  4. display: flex;：将 .dashboard-card 设置为 弹性容器

  5. flex-direction: column;：设置 .dashboard-card 中子元素沿 垂直方向（列方向）排列。

  6. justify-content: center;：设置 .dashboard-card 内子元素在 主轴方向（垂直方向） 上 居中对齐。

  7. align-items: center;：设置 .dashboard-card 内子元素在 交叉轴（水平方向） 上 居中对齐。

仪表盘的设置

1
<div id="gauge1" class="gauge-container"></div>
1
2
3
4
.gauge-container {
    width: 260px;
    height: 260px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 初始化ECharts实例
var userChart = echarts.init(document.getElementById('gauge1'));

// 仪表盘配置项
var gaugeOption = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
        {
            name: '用户总数',
            type: 'gauge',
            detail: {
                formatter: '{value}%',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 20
                }
            },
            axisLine: {
                lineStyle: {
                    width: 15,
                    color: [[0.3, '#00ff00'], [0.7, '#00e6e6'], [1, '#ff0000']]
                }
            },
            data: [{ value: 50, name: '完成率' }]
        }
    ]
};

// 设置图表选项并渲染
userChart.setOption(gaugeOption);

// 模拟数据动态更新
setInterval(function () {
    gaugeOption.series[0].data[0].value = (Math.random() * 100).toFixed(2);
    userChart.setOption(gaugeOption, true);
}, 2000);

使用了 ECharts 库来创建一个 动态更新的仪表盘图表。

在html代码顶部定义了<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

【步骤一：初始化ECharts实例】

1
var userChart = echarts.init(document.getElementById('gauge1'));
  1. echarts.init()：初始化 ECharts 实例，并绑定到指定的 DOM 元素上。
  2. document.getElementById('gauge1')：获取 HTML 中的 id 为 gauge1 的元素（一个用于显示仪表盘的 <div> 容器）。

【步骤二：定义ECharts配置项】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var gaugeOption = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
        {
            name: '用户总数',
            type: 'gauge',
            detail: {
                formatter: '{value}%',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 20
                }
            },
            axisLine: {
                lineStyle: {
                    width: 15,
                    color: [[0.3, '#00ff00'], [0.7, '#00e6e6'], [1, '#ff0000']]
                }
            },
            data: [{ value: 50, name: '完成率' }]
        }
    ]
};

  • tooltip：工具提示配置项，用于显示鼠标悬停时的提示信息。

    • formatter: '{a} <br/>{b} : {c}%'：格式化工具提示文本，{a} 表示系列名称，{b} 表示数据项名称，{c} 表示当前数据值。
    • 作用：当鼠标悬停在仪表盘指针上时，会显示：
    1
    2
    用户总数
    完成率 ：50%

  • series：图表的系列列表。series是ECharts中核心配置项，用于配置一个仪表盘图表

    • name：就是tooltip中的formatter里的{a}，用于鼠标悬浮显示的名称。
    • type: 'gauge'：图表类型，这里是gauge（仪表盘）
    • detail：指示仪表盘指针当前值的显示样式设置
      • formatter: '{value}%'：格式化显示当前值，{value} 表示仪表盘的当前值（如 50%）。
      • textStyle：
        • color: '#ffffff'：显示当前值的文本颜色为白色。
        • fontSize: 20：设置字体大小为 20 像素。
    • axisLine：设置仪表盘的轴线样式（即背景圆环样式）。
      • lineStyle：
        • width: 15：设置轴线的宽度为15像素
        • color：设置不同区间对应的颜色：比如
          • [[0.3, '#00ff00']]：表示 0-30% 区间的轴线颜色为绿色（#00ff00）。
          • [[0.7, '#00e6e6']]：表示 30%-70% 的区间为亮青色（#00e6e6）。
          • [[1, '#ff0000']]：表示 70%-100% 的区间为红色（#ff0000）
    • data：仪表盘当前显示的数据。
      • [{ value: 50, name: '完成率' }]：表示仪表盘初始显示的值为 50，数据名称为 完成率。

【步骤三：将配置项应用到图表实例】

更新userChart

1
userChart.setOption(gaugeOption);

【步骤四：动态更新数据】

1
2
3
4
setInterval(function () {
    gaugeOption.series[0].data[0].value = (Math.random() * 100).toFixed(2);
    userChart.setOption(gaugeOption, true);
}, 2000);

  • setInterval(function, 2000);

    • 设置一个 定时器，每隔 2000 毫秒（2秒）执行一次 function 回调函数，从而实现数据的动态更新。

  • function() { ... }

    1
    2
    // 生成随机数据
    gaugeOption.series[0].data[0].value = (Math.random() * 100).toFixed(2);
    • Math.random()：生成一个 0 到 1 之间的随机浮点数。
    • Math.random() * 100：将随机数放大到 0 到 100 之间。
    • .toFixed(2)：将随机数保留两位小数。
    • 这一行代码的作用是生成一个 0-100 之间的随机数，并将其赋值给 gaugeOption.series[0].data[0].value，即仪表盘当前显示的值。

  • 跟新图表数据

    1
    userChart.setOption(gaugeOption, true);
    • 调用 setOption() 方法再次渲染图表，并设置 true 表示不合并，而是直接更新现有配置项。
    • 通过 setOption 使图表的指针指向新的值，从而实现动态更新效果。

ECharts其他图像

ECharts官网

图表类型 type 取值 描述 典型应用场景
折线图 'line' 展示数据的趋势变化，支持平滑、阶梯样式。 数据趋势分析、时间序列数据展示
柱状图 'bar' 通过柱状条表示不同数据项的大小。 类别数据对比、分布分析
饼图 'pie' 通过扇形表示各部分占整体的比例。 百分比分析、市场份额分布
散点图 'scatter' 用点表示数据分布，支持气泡图等变种。 数据分布分析、相关性分析
仪表盘 'gauge' 用于显示仪表盘样式的数据，适合监控类数据展示。 系统状态监控、指标达成度
雷达图 'radar' 通过多维数据展示各项指标的表现。 多维数据分析、属性对比
K 线图 'candlestick' 主要用于金融市场数据的 K 线（蜡烛图）展示。 股票价格波动、外汇市场数据
热力图 'heatmap' 用颜色深浅表示数据密度分布。 地理数据分析、分布热图
漏斗图 'funnel' 表示数据的逐级流失或转化。 销售转化、营销分析
词云图 'wordCloud' 用不同大小和颜色的文字展示关键词频率。 关键词分析、社交媒体热点词展示
箱线图 'boxplot' 显示数据的分布情况，包含四分位数和极值。 数据分布分析、异常值检测
桑基图 'sankey' 用流向图表示数据的流转和分布。 数据流动、能量流动分析
地图 'map' 地理数据可视化，支持各种地理地图数据格式。 地理数据展示、分布图
关系图 'graph' 显示节点之间的关系，适合用于社交网络分析。 关系网络图、社交网络图
平行坐标图 'parallel' 多个坐标轴展示多维数据的分布情况。 多维数据分析、多特征数据分布
矩形树图 'treemap' 用嵌套矩形表示数据的层次结构和大小对比。 数据分层分析、文件大小占比
树图 'tree' 通过树形结构表示层次关系。 组织架构图、层次结构展示
日历图 'calendar' 显示按日、月、年排列的数据。 日历数据分析、时间趋势展示
流图 'lines' 用线条表示数据的流动方向，通常配合地图使用。 航线图、物流流向分析
区域图 'area' 折线图的变种，使用区域填充方式展示数据量大小。 面积比较、趋势分析
水球图 'liquidFill' 显示液面高度及波动，适合用来展示进度或百分比。 百分比进度、进度条
烛光图（漏斗图变种） 'pictorialBar' 使用图片或自定义图形绘制漏斗图或条形图。 自定义形状的漏斗图或柱形图
图表混合类型 'custom' 允许自定义数据渲染。 实现复杂的图表类型或效果

fetch

以下是 fetch 的基本使用方式：

1
2
3
4
fetch('https://api.example.com/data')  // 向指定 URL 发送 GET 请求
  .then(response => response.json())   // 将响应数据解析为 JSON 格式
  .then(data => console.log(data))     // 处理解析后的 JSON 数据
  .catch(error => console.error('Error:', error));  // 处理错误

代码解释：

  1. fetch('https://api.example.com/data')：向 https://api.example.com/data 发送 HTTP GET 请求。
  2. .then(response => response.json())：fetch 返回的 Promise 对象代表一个 Response，使用 .json() 方法将 Response 中的数据解析为 JSON 格式的 JavaScript 对象。
  3. .then(data => console.log(data))：当解析完成后，将结果输出到控制台。
  4. .catch(error => console.error('Error:', error))：处理请求过程中可能发生的任何错误（如网络问题）。