使用css画一个羽毛球场地图

在前端开发中，你可以使用HTML和CSS来绘制一个简单的羽毛球场地图。下面是一个基本的示例，展示了如何创建一个表示羽毛球场的简单图形。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>羽毛球场地图</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="badminton-court">
        <div class="court-line"></div>
        <div class="court-line"></div>
        <div class="court-line"></div>
        <div class="court-line"></div>
        <div class="net"></div>
    </div>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.badminton-court {
    position: relative;
    width: 610px; /* 羽毛球场宽度 */
    height: 1340px; /* 羽毛球场长度，包括发球区 */
    background-color: #87ceeb; /* 浅蓝色背景 */
}

.court-line {
    position: absolute;
    background-color: white; /* 线条颜色 */
}

.court-line:nth-child(1) {
    width: 100%; /* 场地底边线 */
    height: 40px; /* 线条宽度 */
    bottom: 0;
}

.court-line:nth-child(2) {
    width: 40px; /* 场地侧边线 */
    height: 100%;
    left: 0;
}

.court-line:nth-child(3) {
    width: 40px; /* 场地另一侧边线 */
    height: 100%;
    right: 0;
}

.court-line:nth-child(4) {
    width: 100%; /* 中线 */
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.net {
    position: absolute;
    width: 60px; /* 网宽 */
    height: 1520px; /* 网高，包括支柱 */
    background-color: black; /* 网颜色 */
    left: 50%;
    transform: translateX(-50%);
    top: -90px; /* 网支柱高度 */
}

这个示例创建了一个简单的羽毛球场地图，包括场地边界线和网。你可以根据需要调整尺寸、颜色和细节。请注意，这个示例是基于简化的羽毛球场尺寸，可能不完全符合实际标准。如果你需要更精确的尺寸，请查阅相关规范并进行相应调整。

posted @ 2024-12-17 09:04  王铁柱6  阅读(63)  评论(0)    收藏  举报