HTML 页面，使其更加美观、易于阅读，_<!doctype html> <html> <head> <style> body {font-f-优快云博客

本文链接：https://blog.youkuaiyun.com/matlab_python22/article/details/145269202

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>

<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>