用css画一个羽毛球场地图

要创建一个羽毛球场地的 CSS 图形，你可以使用 HTML 和 CSS 的基本形状和布局功能。羽毛球场地通常是长方形的，中间有一个网子分隔开。

以下是一个简单的示例，展示了如何用 CSS 创建一个羽毛球场地的示意图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>羽毛球场地</title>
<style>
  .court {
    width: 1340px; /* 羽毛球场地标准宽度 */
    height: 610px; /* 羽毛球场地标准长度的一半，因为通常只显示一半 */
    border: 2px solid black;
    position: relative;
    background-color: #f0f0f0;
  }

  .net {
    width: 2px;
    height: 100%;
    background-color: black;
    position: absolute;
    left: 50%;
    top: 0;
  }

  .service-line {
    width: 100%;
    height: 2px;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 0;
  }

  /* 可选：添加双打边线 */
  .doubles-side-line {
    width: 2px;
    height: 420px; /* 根据实际尺寸调整 */
    background-color: black;
    position: absolute;
    top: 95px; /* 根据实际尺寸调整 */
  }

  .doubles-side-line.left {
    left: 420px; /* 双打场地左边线距离 */
  }

  .doubles-side-line.right {
    right: 420px; /* 双打场地右边线距离 */
  }

  /* 可选：添加单打边线 */
  .singles-side-line {
    width: 2px;
    height: 420px; /* 根据实际尺寸调整 */
    background-color: dashed black;
    position: absolute;
    top: 95px; /* 根据实际尺寸调整 */
  }

  .singles-side-line.left {
    left: 170px; /* 单打场地左边线距离 */
  }

  .singles-side-line.right {
    right: 170px; /* 单打场地右边线距离 */
  }
</style>
</head>
<body>
<div class="court">
  <div class="net"></div>
  <div class="service-line"></div>
  <!-- 可选：添加双打边线 -->
  <div class="doubles-side-line left"></div>
  <div class="doubles-side-line right"></div>
  <!-- 可选：添加单打边线，如果需要的话 -->
  <!-- <div class="singles-side-line left"></div>
  <div class="singles-side-line right"></div> -->
</div>
</body>
</html>

这个示例创建了一个基本的羽毛球场地示意图，包括场地边界、中线（网子）和发球线。你可以根据需要调整尺寸和样式。注意，这个示例是简化的，并没有完全按照羽毛球场地的所有详细规格来绘制（例如，边角的圆弧、场地的精确尺寸等）。如果需要更精确的表示，你可能需要使用 SVG 或 canvas。

另外，请注意，在实际开发中，你可能需要考虑响应式设计，以便在不同大小的屏幕上适当地显示羽毛球场地。

posted @ 2024-12-16 09:41  王铁柱6  阅读(28)  评论(0)    收藏  举报