方案一:html<ul><liclass="active"><em><><p><b>參與考試《第一期模擬考試》</b></p><p><time>3小時50分鐘</time></p></li><li><em><><p><b>學習文檔《LDO電路設計規范》</b></p><p><time>3小時50分鐘</time></p></li><li><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;}ulli{position:relative;padding-left:30px;padding-bottom:20px;border-left:2px#999solid;}ulliem{position:absolute;left:-5px;top:0;width:8px;height:8px;border-radius:8px;background:#999;}ulli.activeem{background:red;}ullip{margin:0;}ullitime{color:#999;font-size:12px;}實現原理:給每一個li一個左邊框,em標簽使用樣式寫成原點,采用定位將原點定位到邊框線上