使用 html 和 css 绘制动态线

Question

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

我只对台词部分感兴趣。 Here 是我到目前为止尝试过的。

html:

<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>

css:

.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;
}

我在这里面临两个问题。

我不知道如何仅使用 html 和 css 绘制随机定位的线。
我无法事先猜测每个模块的高度，因此无法在代码中推断出我必须在模块名称上画一个水平叉。

我指的是主要名称，在屏幕截图中以粗体显示为程序名称，从左侧缩进的名称为模块名称。

我希望至少有人能在这里提供一些帮助。

Answer 1

我不打算实现细节，但您可以使用组织良好的结构结合 background 大小来创建您正在寻找的效果。我正在使用单像素 SVG 背景图像，您可以使用 background-size 拉伸它以生成您想要的外观。它也不会牺牲实际的语义：

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  padding-left: 5px;
  background: url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' preserveAspectRatio='none'><rect x='0' y='0' width='1' height='1' fill='gray' stroke='none' /></svg>" );
  background-size: 1px calc(100% - .5em);
  background-position: top 0 left 5px;
  background-repeat: no-repeat;
}

li {
  padding: 0;
  padding-left: 10px;
  background: url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' preserveAspectRatio='none'><rect x='0' y='0' width='1' height='1' fill='gray' stroke='none' /></svg>" );
  background-size: 8px 1px;
  background-position: top .5em left 0;
  background-repeat: no-repeat;
}

<h1>List</h1>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Lipsum Dolor</li>
  <li>
    Sit Amet:
    <ul>
      <li>Dolor</li>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Datia</li>
    </ul>
  </li>
  <li>Other</li>
</ul>

为了让最后一项不会像疯了一样伸展，我们将不得不使用乘法 background 定义，所以这不能与一些旧的浏览器兼容，但无论如何它都能工作：

ul, h1 {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1 {
  font-size: 1rem;
  color: gray;
  border-bottom: 1px solid gray;
}


li {
  padding: 0;
  padding-left: 13px;
  background: url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' preserveAspectRatio='none'><rect x='0' y='0' width='1' height='1' fill='gray' stroke='none' /></svg>" ), url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' preserveAspectRatio='none'><rect x='0' y='0' width='1' height='1' fill='gray' stroke='none' /></svg>" );
  background-size: 8px 1px, 1px 100%;
  background-position: top .5em left 5px, top 0 left 5px;
  background-repeat: no-repeat, no-repeat;
}

li:last-of-type {
  background-size: 8px 1px, 1px .5em;
}

<h1>List</h1>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Lipsum Dolor</li>
  <li>
    Sit Amet:
    <ul>
      <li>Dolor</li>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Datia</li>
    </ul>
  </li>
</ul>

<h1>'Nother List</h1>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Lipsum Dolor</li>
  <li>
    Sit Amet:
    <ul>
      <li>Dolor</li>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Datia</li>
    </ul>
  </li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Lipsum Dolor<br />Sit Amet Nanaba</li>
</ul>

使用 html 和 css 绘制动态线

Draw dynamic lines using html and css

html

css

dynamic

line

draw