< p>優(yōu)惠券列表CSS設(shè)計:< /p>< pre>/* 定義優(yōu)惠券列表的樣式 */
.coupon-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
/* 定義單個優(yōu)惠券的樣式 */
.coupon {
width: 30%;
border: 2px solid #ccc;
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
}
/* 定義優(yōu)惠券標題、描述的樣式 */
.coupon-title {
font-size: 18px;
font-weight: bold;
margin-top: 0px;
}
.coupon-description {
font-size: 14px;
line-height: 1.5;
margin-top: 5px;
}
/* 定義優(yōu)惠券價格、時間等信息的樣式 */
.coupon-price {
font-weight: bold;
margin-top: 10px;
}
.coupon-time {
margin-top: 5px;
}
/* 定義優(yōu)惠券按鈕的樣式 */
.coupon-btn {
display: inline-block;
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 16px;
text-align: center;
text-decoration: none;
font-size: 16px;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
/* 鼠標指針移動在優(yōu)惠券按鈕上時顯示樣式 */
.coupon-btn:hover {
background-color: #3e8e41;
}< p>上述CSS代碼是一個優(yōu)惠券列表的設(shè)計，其中包含了使用flexbox進行布局、定義單個優(yōu)惠券的樣式、優(yōu)惠券的標題、描述、價格、時間等信息的樣式以及優(yōu)惠券按鈕的樣式。我們可以根據(jù)需求調(diào)整樣式，添加更多的樣式來滿足設(shè)計要求。< /p>
上一篇mysql 行 連接
下一篇仿天貓html css