方案一:html<ul><liclass="active"><em><><p><b>參與考試《第一期模擬考試》</b></p><p><time>3小時(shí)50分鐘</time></p></li><li><em><><p><b>學(xué)習(xí)文檔《LDO電路設(shè)計(jì)規(guī)范》</b></p><p><time>3小時(shí)50分鐘</time></p></li><li><em><><p><b>學(xué)習(xí)文檔《LDO電路設(shè)計(jì)規(guī)范》</b></p><p><time>3小時(shí)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;}實(shí)現(xiàn)原理:給每一個(gè)li一個(gè)左邊框,em標(biāo)簽使用樣式寫成原點(diǎn),采用定位將原點(diǎn)定位到邊框線上