CSS列表頁(yè)面是一種網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格,常用于展示各種信息,比如人物簡(jiǎn)介。
.list { list-style-type: none; margin: 0; padding: 0; } .list li { display: flex; align-items: center; margin-bottom: 30px; } .list img { width: 80px; height: 80px; margin-right: 20px; } .list h3 { font-size: 24px; margin: 0; } .list p { font-size: 16px; margin: 0; }
在這個(gè)例子中,我們用了一個(gè)無(wú)序列表,將人物信息一一列舉出來(lái)。每個(gè)人物的信息都放在一個(gè)列表項(xiàng)里。
通過(guò)CSS樣式,我們?cè)O(shè)置了列表項(xiàng)的樣式,并讓里面的元素進(jìn)行了排版和美化。比如,人物的頭像放在一個(gè)圖片標(biāo)簽里,文字信息則用標(biāo)題和段落標(biāo)簽來(lái)呈現(xiàn)。
通過(guò)這種方式,我們可以讓人物信息頁(yè)面看起來(lái)更整潔美觀,閱讀起來(lái)也更加愉悅。