CSS 梅蘭商城項目實戰(zhàn)

/*設(shè)置頁面標題*/
<title>梅蘭商城</title>
/*設(shè)置頁面背景色*/
body {
background-color: #F6F6F6;
}
/*設(shè)置導(dǎo)航欄樣式*/
.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 0 120px;
background-color: white;
}
/*設(shè)置導(dǎo)航欄鏈接樣式*/
.nav a {
text-decoration: none;
color: black;
}
/*設(shè)置商品列表樣式*/
.goods {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
margin-top: 40px;
background-color: white;
}
/*設(shè)置商品卡片樣式*/
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 400px;
background-color: #F9D9E7;
border-radius: 20px;
padding: 20px;
}
/*設(shè)置商品圖片樣式*/
.card img {
height: 200px;
object-fit: cover;
border-radius: 10px;
}
/*設(shè)置商品名稱樣式*/
.card h3 {
font-size: 20px;
margin: 0;
}
/*設(shè)置商品價格樣式*/
.card p {
font-weight: bold;
font-size: 18px;
margin: 10px 0 0 0;
}
/*設(shè)置購買按鈕樣式*/
.card button {
height: 40px;
border-radius: 20px;
background-color: #FFCACE;
border: none;
outline: none;
cursor: pointer;
}
/*設(shè)置底部樣式*/
footer {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background-color: #E5E5E5;
}
/*設(shè)置底部文字樣式*/
footer p {
font-size: 16px;
margin: 0;
}

這是一份簡單的 CSS 代碼，用于梅蘭商城項目的實戰(zhàn)，代碼中包含了設(shè)置頁面背景色、導(dǎo)航欄樣式、商品列表和卡片樣式、購買按鈕樣式、以及底部的樣式等多種樣式設(shè)置，以達到一個更加美觀大方的效果。