方案一: html <ul> <li class=”active”> <em></em> <p><b>参与考试《第一期模拟考试》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <em></em> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <em></em> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> </ul> Css: *{margin:0;padding:0;} ul{ margin:100px; padding:0; list-style: none; } ul li{position:relative;padding-left: 30px;padding-bottom: 20px;border-left:2px #999 solid; } ul li em{position:absolute; left:-5px; top:0; width:8px; height:8px;border-radius:8px;background:#999; } ul li.active em{ background: red;} ul li p{margin:0;} ul li time{color:#999;font-size:12px;} 实现原理: 给每一个li一个左边框,em标签使用样式写成原点,采用定位将原点定位到边框线上
