javascript - 这个效果html怎么实现

问题描述

问 题

如图的这个效果怎么实现啊，我做了一半，没能实现

<div>
     <div style="line-height: 30px;">
         <div style="border: 1px solid gray; height: 10px; width: 10px; float: left; margin: 10px;" class="img-circle"></div>
         <div style="font-size: 14pt;">前期沟通</div>
     </div>
     <div style="margin: 0px 15px; border-left: 1px solid gray;">
          <ul>
                 <li>功能需求</li>
                 <li>文案需求</li>
                 <li>其他需求</li>
          </ul>
      </div>
</div>

解决方案

<style>
.img-circle{
  width: 10px;
  height: 10px;
  border: 1px solid #DDD;
  border-radius: 50%;
  float: left;
  margin: 10px;
  position: relative;
}
.img-circle::after{
  content: '';
  width: 1px;
  height: 300px;
  border-left: 1px solid #ddd;
  display: block;
  position: absolute;
  top: 10px;
  left: 5px;
}
</style>

<div>
     <div style="line-height: 30px;">
         <div class="img-circle"></div>
         <div style="font-size: 14pt;">前期沟通</div>
     </div>
     <div>
          <ul>
                 <li>功能需求</li>
                 <li>文案需求</li>
                 <li>其他需求</li>
          </ul>
      </div>
</div>

这篇关于javascript - 这个效果html怎么实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！