使用html和css绘制动态线

是否可以使用html和css绘制以下内容

我只对线路部分感兴趣。这就是我迄今为止所尝试的

html:

我在这里面临两个问题

我不知道如何仅使用

html

和

css

来画一条随机定位的线

我无法预先猜测每个模块需要多少高度，因此无法在代码中推断何时必须在模块名称上画一个水平叉

我将主名称（在屏幕截图中以粗体显示）作为程序名，将从左缩进的名称作为模块名

---

我希望至少有人能在这方面提供帮助。

我不打算实施细节，但您可以使用组织良好的结构，结合

背景

大小来创建您想要的效果。我使用的是单像素SVG背景图像，您可以使用

背景大小来拉伸它，以生成您想要的外观。它也不会牺牲实际的语义：


ul{
填充：0；
保证金：0；
列表样式：无；
左侧填充：5px；
背景：url（“数据：image/svg+xml；charset=utf8，”）；
背景尺寸：1px钙（100%-.5em）；
背景位置：左上0 5px；
背景重复：无重复；
}
李{
填充：0；
左侧填充：10px；
背景：url（“数据：image/svg+xml；charset=utf8，”）；
背景尺寸：8px 1px；
背景位置：顶部。5em左0；
背景重复：无重复；
}
列表

项目1
项目2
利普苏姆多洛酒店

薛阿美：

多洛
洛勒姆
Ipsum
达蒂亚


其他
如果最后一个
li
占用多行，您如何解决问题？例如，.@iloves甚至是肯定的，但事情变得稍微复杂一些。在这种情况下，所有填充都需要转到
，并且需要两个背景图像。让我试着给你们举个小例子。@ILOVESE我甚至用了一种稍微不同的方法添加了一个小片段——我认为这一个更好，但它需要对多重背景的支持（目前大多数浏览器都有这种支持！）。然后，您可以关注最后一个子项（或类型），并在那里结束列表。您可以用这种方式解决很多这样的边缘情况。您绘制的线是使用svg的rect绘制的。我试图调整
视图框
和
宽度
和
高度
属性，添加了
笔划宽度
和
笔划=“黑色”
属性，但它没有改变行的宽度。有可能以某种方式改变线条的宽度吗？哦。那
背景大小
的把戏太神奇了。多谢各位。英雄联盟
<div class="outer">
  <div class="inner">
    <div class="topPart">
      TOP
    </div>
    <div class="middlePart">
      <div class="program selectedProgram">
        <div class="programName">
          foo program
        </div>

        <div class="modulesDiv">
          <div class="module">
           <div class="moduleName">
             foo module foo module foo module foo module foo module
           </div>
          </div>
          <div class="module">
           <div class="moduleName">
             foo short name
           </div>
          </div>
          <div class="module">
           <div class="moduleName">
             foo module foo module foo module foo module foo module
           </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomPart">
      BOTTOM
    </div>
  </div>
</div>

.outer {
  background-color: red;
  position: relative;
  margin: 0 auto;
  top: 40px;
  width: 200px;
  height: 2000px;
  background-image: url('https://mdn.mozillademos.org/files/7693/catfront.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.inner {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: cyan;
  width: 200px;
  height: 400px/* 100vh */
  ;
}

.topPart {
  position: absolute;
  height: 10%;
  width: 100%;
  top: 0;
  background-color: pink;
  text-align: center;
}

.middlePart {
  position: absolute;
  height: 80%;
  width: 100%;
  top: 10%;
  background-color: yellow;
  text-align: center;
}

.bottomPart {
  position: absolute;
  height: 10%;
  width: 100%;
  top: 90%;
  background-color: #66aa11;
  text-align: center;
}

.program {
  height: auto;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  word-wrap: break-word;
  border-bottom: 1px solid #afadad;
  position: relative;
}

.program.selectedProgram {
  border-left: 4px solid #289efd;
}

.program .programName {
  display: inline;
  font-size: 110%;
  color: #484646;
  padding-left: 5%;
  vertical-align: middle;
}

.selectedProgram.program .programName {
  font-weight: bold;
  color: #289efd;
}

.program:hover .programName {
  color: #289efd;
}

.program .programName {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  white-space: -webkit-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

.modulesDiv {
  height: auto;
  width: 100%;
  position: relative;
  padding-left: 5%;
  padding-top: 5%;
  display: none;
}

.selectedProgram .modulesDiv {
  display: block;
}

.module {
  height: auto;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  word-wrap: break-word;
  position: relative;
}

.program .moduleName {
  display: inline;
  font-size: 110%;
  color: #484646;
  padding-left: 5%;
  vertical-align: middle;
}

.selectedModule.module .moduleName {
  font-weight: bold;
  color: #289efd;
}

.module:hover .moduleName {
  color: #289efd;
}