案一:

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標簽使用樣式寫成原點,采用定位將原點定位到邊框線上

方案二:

Html

<ul>
		<li class="active">
			<img src="2.png" alt="" />
			<p><b>參與考試《第一期模擬考試》</b></p>
			<p><time>3小時50分鐘</time></p>
		</li>
		<li>
			<img src="1.png" alt="" />
			<p><b>學習文檔《LDO電路設計規范》</b></p>
			<p><time>3小時50分鐘</time></p>
		</li>
		<li>
			<img src="1.png" alt="" />
			<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 img{
				position:absolute;
				left:-5px;
				top:0;
				width:10px;
				height:10px;
				border-radius:10px;
				background:#999;
			}
			ul li p{margin:0;}
			ul li time{color:#999;font-size:12px;}

實現原理:

給li一個左邊框,同時在結構中添加img作為原點,使用定位將圖片原點定位在指定位置上

來源：千鋒web前端

學生就可以看懂的css基礎知識系列，pre標簽里是筆記總結，動手實際操作一下會加強理解。有疑問留言交流哦。