实验一 使用DIV+CSS制作网站首页

实验名称

使用DIV+CSS制作网站首页

实验目的 ：

1. 掌握HTML、CSS基础知识
2. 掌握DIV+CSS进行网页布局
3. 掌握Flex网页布局
4. 掌握网站复杂页面制作

实验环境：

1、硬件要求：计算机一台

2、软件要求：Chrome浏览器、IE11浏览器、Firefox浏览器

3、网络要求：能访问互联网

实验步骤和内容：

1、实验步骤

1. 准备工作

创建一个新的 HTML 文件，命名为 test.html。如图1-1所示。

图1-1 HTML文件创建

在 HTML 文件中引入 ECharts 库，用于生成图表。如图1-2所示。

图1-2 ECharts引入

编写所需的 CSS 样式，包括页面布局和元素样式。如图1-3所示。

图1-3 CSS样式设计

1. 页面结构搭建

使用 DIV 元素构建页面布局，分为顶部标题栏、导航栏、数据表格和图表展示区域。如图1-4所示。

图1-4 DIV布局

为各个 DIV 区域添加对应的类名，以便后续样式设置。

1. 动态时间显示

编写 JavaScript 函数 getD1()，用于实时获取系统时间并显示在页面上。

使用 setInterval() 方法每秒更新一次时间显示。如图1-5所示。

图1-5 动态时间显示的实现

1. 顶部标题栏和导航栏

顶部标题栏使用线性渐变背景色，显示系统名称和图标。如图1-6所示。

图1-6 顶部标题栏的实现

导航栏包含若干按钮和下拉选择框，采用线性渐变背景色和浮动布局。如图1-7所示。

图1-7 按钮和下拉框的实现

1. 数据表格

使用 HTML 表格标签 <table> 构建数据表格，包含两行数据。

每个单元格展示相关信息和图标，设置样式和边框。如图1-8所示。

图1-8 数据表格的实现

1. 图表展示

使用 ECharts 初始化多个图表实例，分别显示 DHCP 解析日志数量的变化趋势。

每个图表设置标题、数据、坐标轴等配置项，并在指定的 DIV 区域中显示。如图1-9所示。

图1-9 图表的实现

1. 调试和优化

使用浏览器开发者工具检查页面布局和样式，确保各元素正常显示。

调试 JavaScript 函数，确保时间显示正常更新。

2、实验结果

1. 页面顶部显示了系统名称和图标，导航栏包含了多个按钮和下拉选择框。如图2-1所示。

图2-1 导航栏展示

1. 实时显示系统时间，并每秒更新一次。
2. 数据表格展示了两行数据，每行包含多个单元格显示相关信息和图标。如图2-3所示。

图2-2 表格展示

1. 图表展示了 DHCP 解析日志数量的变化趋势，分为四个不同时间段的数据。如图2-4所示。

图2-3 图表展示