在網頁設計中，我們經常會遇到需要實現圖文列表的情況，比如展示產品特點、介紹公司團隊等。今天，我們來學習如何使用純CSS實現圖文列表。

<ul class="list">
<li>
<img src="image1.jpg" alt="image1">
<div class="text">
<h3>標題1</h3>
<p>文本內容1</p>
</div>
</li>
<li>
<img src="image2.jpg" alt="image2">
<div class="text">
<h3>標題2</h3>
<p>文本內容2</p>
</div>
</li>
<li>
<img src="image3.jpg" alt="image3">
<div class="text">
<h3>標題3</h3>
<p>文本內容3</p>
</div>
</li>
</ul>

首先，我們需要創建一個無序列表（ul），每個列表項（li）中包含一張圖片和一段文本。圖片可以通過img標簽來實現，文本則需要使用一個div容器包裹，并使用h3和p標簽來分別實現標題和文本內容。

.list {
list-style: none;
padding: 0;
margin: 0;
}
.list li {
display: flex;
margin-bottom: 20px;
}
.list li img {
width: 200px;
height: auto;
margin-right: 20px;
}
.list li .text {
flex-grow: 1;
}
.list li .text h3 {
font-size: 24px;
font-weight: bold;
margin: 0;
margin-bottom: 10px;
}
.list li .text p {
font-size: 16px;
margin: 0;
}

接下來，我們需要使用CSS來對列表進行樣式修飾。首先，我們將ul的默認樣式去除，并設置一些默認的padding和margin值。接著，我們使用flex布局來使每個li中的圖片和文本并排顯示，并給li之間添加一些margin-bottom值，用于分隔不同的列表項。圖片的寬度可以根據實際需要進行調整，高度則可以通過height設置為auto來自適應。文本容器需要設置flex-grow為1，以防止文本過長時出現布局問題。最后，我們對標題和文本分別進行了樣式設置，包括字體大小、字重和margin。

至此，一個簡單的純CSS圖文列表就完成了。通過靈活的樣式調整，我們可以輕松實現不同的布局效果，并讓頁面顯示更為美觀與精細。