|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
【示例】使用CSS Grid輕松實現(xiàn)模塊列表布局(響應(yīng)式)
作者:admin 時間:2022-10-28 10:11:13 瀏覽:我們在對多個項目信息進(jìn)行模塊列表輸出的時候，CSS起到關(guān)鍵作用。本文介紹如何使用CSS Grid輕松實現(xiàn)自適應(yīng)模塊列表布局。
先看效果圖，兩個模塊列表，自適應(yīng)設(shè)備橫排列和豎排列。
HTML代碼
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #31e768;
display: flexbox;
font-size: large;
}
.trello {
display: grid;
background: #1db64b;
grid-template-rows: auto auto;
grid-template-columns: repeat(auto-fit, 250px);
grid-gap: 12px;
}
.trello__list {
background-color: #d6d5d5;
border-radius: 3px;
align-self: start;
}
.trello__list__item {
background-color: white;
background: white;
display: grid;
border-radius: 5px;
margin: 7px;
padding: 2px;
}
.highlighted {
background-color: rgb(102, 192, 102);
width: 30px;
color: white;
border-radius: 4px;
padding: 2px;
font-size: small;
margin-top: 2px;
}
</style>
</head>
<body>
<div class="trello">
<div class="trello__list">
<span style="font-size:large; margin-left:5px">CSS教程</span>
<div class="trello__list__item">
<span>CSS Grid 和 CSS Flexbox 的區(qū)別</span>
<span class="highlighted">CSS</span>
</div>
<div class="trello__list__item">
<span>用HTML + CSS創(chuàng)建可拖動的范圍滑塊</span>
<span class="highlighted">GFG</span>
</div>
<div class="trello__list__item">
<span>詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動畫</span>
</div>
</div>
<div class="trello__list">
<span style="font-size:large; margin-left:5px">JS教程</span>
<div class="trello__list__item">
<span>如何用JavaScript創(chuàng)建水平(橫向)滾動列表</span>
</div>
<div class="trello__list__item">
<span>5示例演示jQuery .call 和 .apply 的使用區(qū)別</span>
</div>
<div class="trello__list__item">
<span>JS 面試題：.call 和.apply 有什么區(qū)別？</span>
</div>
<div class="trello__list__item">
<span>JavaScript this 面試練習(xí)題5例</span>
</div>
</div>
</div>
</body>
</html>
解釋
1、.trello 是整體布局類，.trello__list 是列表塊的類，.trello__list__item 是列表內(nèi)容項的類，.highlighted 是高亮顯示（用于標(biāo)簽）。
2、.trello 類的各個屬性
display: grid;表示以網(wǎng)格布局顯示。grid-template-rows: auto auto;用于設(shè)置網(wǎng)格布局中的行數(shù)及高度。grid-template-columns: repeat(auto-fit, 250px);設(shè)置網(wǎng)絡(luò)布局中的列表塊寬度。grid-gap: 12px;設(shè)置各個列表塊之間的間隔。
3、.trello__list 類的屬性
align-self: start;設(shè)置對齊單元格的起始邊緣。
4、.trello__list__item 類的屬性
display: grid;設(shè)置以網(wǎng)格布局顯示。
注意！CSS Grid屬性不支持IE瀏覽器。
相關(guān)文章
標(biāo)簽: Grid
相關(guān)文章
x
- 站長推薦
