如何做 - 產品卡片
學習如何使用 CSS 建立產品卡片。
定製牛仔褲
$19.99
一些關於牛仔褲的文字。超級修身舒適 lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum。
如何建立產品卡片
步驟 1) 新增 HTML
示例
<div class="card">
<img src="jeans3.jpg" alt="牛仔褲" style="width:100%">
<h1>定製牛仔褲</h1>
<p class="price">¥19.99</p>
<p>一些關於牛仔褲的文字..</p>
<p><button>加入購物車</button></p>
</div>
步驟 2) 新增 CSS
示例
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
自己動手試一試 »
