地形图

134 阅读1分钟

1.使用 HTML 和 CSS 绘制简单平面地形轮廓:通过 div 元素结合 CSS 的 border-radius、width、height、background-color 等属性模拟山脉、平原等地形 2.数据可视化展示地形数据:如果有地形的相关数据,比如不同区域的海拔、坡度等,可以使用 JavaScript 结合 HTML、CSS 来进行数据可视化展示。 示例代码 用 HTML 和 CSS 绘制简单山脉地形

body { background-color: lightblue; margin: 0; } .mountain { width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; display: inline-block; margin-right: -50px; }
代码解释: 首先设置了页面的背景颜色为浅绿色,并且去除了默认的边距。 .mountain 类通过设置 border 属性创建了一个三角形,模拟山脉的形状,border-bottom 的颜色为绿色,代表山脉的颜色。