"```markdown

用CSS画一个羽毛球场地图

羽毛球场地图概述

羽毛球场的标准尺寸为13.4米长，6.1米宽，分为单打和双打两种场地。单打场地宽度为5.18米，双打场地宽度为6.1米。本文将通过CSS绘制一个简单的羽毛球场地图。

HTML结构

<!DOCTYPE html>
<html lang=\"zh\">
<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=\"court\">
        <div class=\"net\"></div>
        <div class=\"line side-line\"></div>
        <div class=\"line center-line\"></div>
        <div class=\"line back-line back-line-left\"></div>
        <div class=\"line back-line back-line-right\"></div>
    </div>
</body>
</html>

CSS样式

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

.court {
    position: relative;
    width: 610px;  /* 双打宽度 6.1米 */
    height: 1340px; /* 长度 13.4米 */
    background-color: #4caf50;
    border: 2px solid #000;
}

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

.line {
    position: absolute;
    background-color: #fff;
}

.side-line {
    width: 5px;
    height: 100%;
    left: 0;  /* 左侧边界 */
}

.center-line {
    width: 5px;
    height: 100%;
    left: 305px; /* 中线 */
}

.back-line {
    width: 5px;
    height: 200px; /* 后场线 */
}

.back-line-left {
    top: 100px; /* 左后场线 */
    left: 0;
}

.back-line-right {
    top: 100px; /* 右后场线 */
    right: 0;
}

代码解释

HTML部分：构建了一个包含羽毛球场的基本结构。court类用于表示整个场地，net类表示中间的球网，line类用于绘制场地的各种线条。
CSS部分：
- body设置为中心对齐，背景色为淡蓝色。
- court设置为绿色背景，边框为黑色，符合羽毛球场的标准颜色。
- net使用绝对定位，设置在场地的中间。
- line类用于绘制场地中的各种线，使用绝对定位使得每条线可以精确放置。

总结

通过上述的HTML和CSS代码，可以创建一个简单的羽毛球场地图。可以根据需要进一步美化和扩展，比如添加场地标识、运动员标志等元素。

用css画一个羽毛球场地图

用CSS画一个羽毛球场地图

羽毛球场地图概述

HTML结构

CSS样式

代码解释

总结