HTML 页面，使其更加美观、易于阅读，

HTML 页面，使其更加美观、易于阅读，并且提供更好的用户体验。以下是优化后的代码，增加了更现代的布局，背景色的调整，以及更加精美的按钮和字体样式：

. 图标设计

• 简洁与现代感：使用线条简洁的图标，避免过多复杂的细节，强调形状和对比度。选择深色和金属色调（如深蓝色、银色、金色、黑色）来提升高级感。
• 渐变效果：使用渐变色彩或半透明效果，让图标看起来更加现代和动感。例如，渐变蓝或渐变紫色可以显得优雅高端。
• 细节和阴影：适当的阴影效果可以增加图标的层次感，使用柔和的阴影让图标更具立体感。
• 几何形状：通过几何形状（如圆形、正方形、三角形等）设计具有辨识度的图标，可以强化图标的现代感和视觉冲击力。

2. 柱形图设计

• 颜色选择：使用深色的底色和金属色、渐变色或透明色填充柱形。避免使用过多鲜艳色彩，采用对比度强的配色方案，如蓝色、黑色与金色搭配。
• 简约的网格线：使用微弱的网格线和坐标轴线，避免占用过多空间，可以让整个图表更简洁而专业。
• 柱形高低对比明显：保持柱形之间的间距适中，避免视觉上的拥挤，确保数据之间有足够的空间以突出柱形的差异。
• 细节元素：在柱形顶部增加数据标签，选择优雅的字体，避免过大或过小的数字影响图表美感。

3. 其他设计建议

• 字体选择：选用现代简洁的无衬线字体（如Helvetica、Roboto、Avenir等），这些字体更符合现代科技感，且具有高辨识度。
• 色调和一致性：确保色调的统一性，不同图标、图表或其他元素应使用相似的色系（如冷色调、金属色），保持整体风格的一致。
• 动画效果：如果适用于数字展示，可以考虑加入动画效果，如柱形图逐步上升、图标逐渐显现等，提升视觉吸引力。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高大上的柱形图与图标</title>
  <style>
    /* 基本布局 */
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #2a2a2a;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      flex-direction: column;
    }

    /* 标题 */
    h1 {
      font-size: 36px;
      color: #d1d1d1;
      margin-bottom: 30px;
    }

    /* 图标容器 */
    .icon-container {
      display: flex;
      gap: 50px;
      margin-bottom: 50px;
    }

    /* 图标样式 */
    .icon {
      width: 80px;
      height: 80px;
      background-color: #007bff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .icon:hover {
      transform: scale(1.1);
    }

    /* 图标内部内容 */
    .icon i {
      color: #fff;
      font-size: 40px;
    }

    /* 柱形图 */
    .chart-container {
      width: 80%;
      height: 300px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    /* 柱形图柱子 */
    .bar {
      width: 50px;
      border-radius: 5px;
      background: linear-gradient(135deg, #00aaff, #0088cc);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: flex-end;
      transition: all 0.3s ease;
    }

    .bar:hover {
      background: linear-gradient(135deg, #005f73, #004a57);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      transform: translateY(-5px);
    }

    /* 柱形图标签 */
    .bar span {
      color: #fff;
      font-size: 16px;
      margin-bottom: 10px;
    }

  </style>
</head>
<body>

  <h1>高大上的图标与柱形图</h1>

  <!-- 图标区域 -->
  <div class="icon-container">
    <div class="icon">
      <i class="fas fa-cogs"></i>
    </div>
    <div class="icon">
      <i class="fas fa-chart-line"></i>
    </div>
    <div class="icon">
      <i class="fas fa-rocket"></i>
    </div>
  </div>

  <!-- 柱形图区域 -->
  <div class="chart-container">
    <div class="bar" style="height: 80%;">
      <span>80</span>
    </div>
    <div class="bar" style="height: 60%;">
      <span>60</span>
    </div>
    <div class="bar" style="height: 40%;">
      <span>40</span>
    </div>
    <div class="bar" style="height: 70%;">
      <span>70</span>
    </div>
    <div class="bar" style="height: 50%;">
      <span>50</span>
    </div>
  </div>

  <!-- 引入Font Awesome图标库 -->
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>

复制编辑

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>深度学习模型展示</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f9f9f9; margin: 0; padding: 0; text-align: center; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: #fff; border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); padding: 30px; width: 90%; max-width: 900px; } h1 { font-size: 36px; color: #4CAF50; margin-bottom: 20px; font-weight: 600; } .model-info { font-size: 18px; color: #555; line-height: 1.6; margin-bottom: 20px; } .accuracy { font-size: 24px; color: #4CAF50; font-weight: bold; margin-bottom: 20px; } .accuracy span { color: #FF5722; } canvas { border: 2px solid #ddd; border-radius: 8px; margin-top: 20px; background-color: #fafafa; } .footer { margin-top: 40px; font-size: 16px; color: #777; } .footer a { color: #4CAF50; text-decoration: none; font-weight: bold; } .footer a:hover { text-decoration: underline; } </style> </head> <body> <div class="container"> <h1>深度学习模型展示</h1> <div class="model-info"> <p><strong>模型类型：</strong>多层感知器（MLP）</p> <p><strong>输入层：</strong>784 个神经元（28x28 像素图像）</p> <p><strong>隐藏层：</strong>128 个神经元，ReLU 激活函数</p> <p><strong>输出层：</strong>10 个神经元，Softmax 激活函数</p> </div> <div class="accuracy"> <p>模型测试准确率：<span id="testAccuracy">98%</span></p> </div> <h2>模型结构图</h2> <canvas id="modelCanvas" width="400" height="300"></canvas> <div class="footer"> <p>更多信息请访问 <a href="https://www.tensorflow.org/" target="_blank">TensorFlow官网</a></p> </div> </div> <script> // 模拟模型结构图 const canvas = document.getElementById("modelCanvas"); const ctx = canvas.getContext("2d"); // 输入层 ctx.fillStyle = "#4CAF50"; ctx.fillRect(20, 50, 80, 30); ctx.fillStyle = "#fff"; ctx.fillText("Input Layer", 30, 70); // 隐藏层 ctx.fillStyle = "#2196F3"; ctx.fillRect(120, 50, 80, 30); ctx.fillStyle = "#fff"; ctx.fillText("Hidden Layer", 130, 70); // 输出层 ctx.fillStyle = "#FF5722"; ctx.fillRect(220, 50, 80, 30); ctx.fillStyle = "#fff"; ctx.fillText("Output Layer", 230, 70); </script> </body> </html>

优化说明：

1. 字体和排版：

   • 使用了更现代的字体（Segoe UI），使页面看起来更加简洁。
   • 增加了行间距，使内容更加清晰易读。

2. 颜色和对比：

   • 通过调整颜色（比如标题的绿色，准确率的橙色），让页面更具视觉冲击力。
   • 调整了文本和背景的对比度，使信息更加突出。

3. 布局和间距：

   • 使用了 flexbox 布局，使页面内容居中显示，适配各种屏幕尺寸。
   • 增加了适当的间距，使页面看起来更整洁、舒适。

4. 按钮和链接：

   • 使得“更多信息请访问”的链接更加醒目，增加了悬停效果，提升用户体验。

5. 图形和样式：

   • 将图形（canvas）周围的边框颜色做了微调，使得页面整体更具层次感。