最近我們學(xué)習(xí)了CSS布局，這是一項(xiàng)非常重要的技能，因?yàn)椴季质蔷W(wǎng)頁設(shè)計(jì)的基石。考慮到這一點(diǎn)，老師給我們分配了一份CSS布局作業(yè)。

html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #f1f1f1;
}
.header {
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.card {
width: 25%;
padding: 20px;
box-sizing: border-box;
}
.card img {
width: 100%;
}
.footer {
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
}
@media screen and (max-width: 768px) {
.card {
width: 50%;
}
}

這個(gè)作業(yè)要求我們創(chuàng)建一個(gè)響應(yīng)式網(wǎng)格，其中有一個(gè)頂部標(biāo)題、5張圖片，以及一個(gè)底部頁腳。我們可以使用Flexbox來創(chuàng)建這個(gè)網(wǎng)格，這是一個(gè)簡單而強(qiáng)大的工具，尤其適用于響應(yīng)式設(shè)計(jì)。

作業(yè)的HTML部分相對(duì)簡單，我們只需要?jiǎng)?chuàng)建一個(gè)包含HTML標(biāo)簽的頁面即可。樣式則是在CSS文件中創(chuàng)建。讓我們看一下這個(gè)樣式表的代碼：

.header {
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.card {
width: 25%;
padding: 20px;
box-sizing: border-box;
}
.card img {
width: 100%;
}
.footer {
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
}

這些樣式定義了網(wǎng)頁的各個(gè)部分，包括頁眉、頁腳、圖片柵格等。我們甚至還可以添加媒體查詢，以確保在移動(dòng)設(shè)備上正確顯示。這是一個(gè)非常棒的作業(yè)，可以讓我們更深入地學(xué)習(xí)CSS布局，并看到它在實(shí)踐中的應(yīng)用。