CSS 左圖右標題列表是一種非常常見的網頁排版方式,它可以讓網頁內容更加清晰明了,同時也提高了用戶的瀏覽體驗。
HTML代碼: <div class="list"> <ul> <li> <img src="image.jpg"> <h3>標題標題標題</h3> <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容。</p> </li> <li> <img src="image.jpg"> <h3>標題標題標題</h3> <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容。</p> </li> ... </ul> </div> CSS代碼: .list{ margin: 30px auto; width: 80%; } ul{ list-style: none; margin:0; padding:0; } li{ display: flex; align-items: center; margin-bottom: 30px; } li img{ width: 150px; height: 150px; margin-right: 20px; } li h3{ font-size: 24px; font-weight: 600; margin-bottom: 10px; } li p{ font-size: 14px; line-height: 1.8; color: #666; margin:0; }
上面的代碼中,我們使用了一個 div 容器和一個 ul 列表元素,每個列表項都包含一個圖片、一個標題和一段描述文字。通過使用 flex 布局和 align-items 屬性來實現左圖右標題的效果,同時通過設置圖片的寬度、高度和右邊距來控制圖片在列表中的位置。
通過使用 CSS 左圖右標題列表,可以使得網頁內容更加美觀、易于閱讀,提高網頁的瀏覽體驗,同時也可以為網頁的 SEO 提供幫助。