html - 框的行和列的背景图像

Question

标题不是很详细，但基本上我想用 HTML 和 CSS 创建这样的东西:

我可以通过将第一行框包装在一个 div 中并将其背景图像设置为该行来制作水平线，但我不确定如何对框列进行分组并在后面添加一条垂直线他们。

感谢任何帮助!

Answer 1

给你DEMO

<div id="container">

    <div id ="horizontal">
        <div id="border2"></div>
    </div>
    <div id="vertical">
        <div id="border"></div>
    </div>

</div>

#container {background: black;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position:relative
}

#vertical {background: white;
    position: absolute;
    width: 70px;
    left: 40%   ;
    height: 300px;
    top:0;
}


#horizontal {background: white;
    position: absolute;


    height: 60px;
    top:40%;
    left:0;
    width: 100%;
}

#border {
    width: 100%;
    height: 150px;

    margin-top: 60px;

    border-top: 2px dashed black;
    border-bottom: 2px dashed black;
}

#border2 {
    width: 80%;
    height: 60px;


    border-right: 2px dashed black;
}