※ 圖片放置結合商品卡範例：
商品成果範例：
建立product-card-2_example專案：
index.html：
<body>
<!-- 網頁的最外層 -->
<div class="wrapper">
<!-- 商品卡 -->
<div class="product">
<!-- 圖片框框 -->
<div class="image-container">
<div class="image"></div>
</div>
<!-- 資訊欄 -->
<div class="info">
<!-- 標題 -->
<h1 class="name">城市公園露臺公寓</h1>
<!-- 文字段落 -->
<p class="para">舒服的地方，很適合全家大小依同出遊時居住，明亮的採光，帶給你一整天愉快的出遊心情。</p>
<!-- 價格 -->
<div class="price">TWD 1600 每晚</div>
</div>
</div>
</div>
style.css：
/* Globel */
* {
box-sizing: border-box;
position: relative;
}
/* 標籤歸零 */
h1,
p {
margin: 0;
}
/* 取消預設樣式 */
a {
text-decoration: none;
color: #000;
}
/* 畫面與視窗的高度一致 */
html,
body {
height: 100%;
/* 字形設定 */
font-family: "微軟正黑體";
}
/* 商品卡外層 */
.wrapper {
/* 依照上層html和body去做撐滿的動作*/
height: 100%;
background-color: #eee;
}
/* Image container 圖片框設定*/
.image-container {
border: 1px solid #000;
width: 100%;
}
/* 用偽元素推出一個固定比例 做出4:3的推擠 */
.image-container:before {
content: '';
display: block;
width: 100%;
padding-bottom: 75%;
border: 1px solid red;
}
/* 圖片標籤 */
.image-container .image {}
/* Product */
.product {
width: 300px;
/* border: 1px solid #000; */
/* 卡片樣式 */
background-color: #fff;
/* 陰影設定 */
box-shadow: 0 8px 36px rgba(0, 0, 0, 0.3);
/* 圓角設定 */
border-radius: 4px;
/* 置中設定 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Product 內資訊*/
.product .info {
/* 文字推擠 一次推上下左右*/
padding: 16px;
}
/* Product 內文字段落*/
.product .info .name {
font-size: 22px;
/* 向下推擠 */
margin-bottom: 16px;
}
.product .info .para {
font-size: 14px;
/* 向下推擠 */
margin-bottom: 18px;
/* 文字對齊 讓文字自動對齊*/
text-align: justify;
/* 調整行高 */
margin-bottom: 16px;
}
/* Product 內文字價格*/
.product .info .price {
font-size: 14px;
/* 文字對齊 */
text-align: right;
color: #ff7878;
/* 字體粗細 */
font-weight: 800;
}
成果顯示：
圖片標籤：
style.css：
/* 圖片標籤 */成果顯示：
.image-container .image {
/* 定位 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 圖片路徑 */
background-image: url(../images/hotel.jpg);
/* 圖片定位 */
background-position: center;
/* 圖片覆蓋 */
background-size: cover;
background-repeat: no-repeat;
}
左上角標籤：
index.html：
<body>
<!-- 網頁的最外層 -->
<div class="wrapper">
<!-- 商品卡 -->
<div class="product">
<!-- 圖片框框 -->
<div class="image-container">
<div class="image"></div>
</div>
<!-- 資訊欄 -->
<div class="info">
<!-- 標題 -->
<h1 class="name">城市公園露臺公寓</h1>
<!-- 文字段落 -->
<p class="para">舒服的地方，很適合全家大小依同出遊時居住，明亮的採光，帶給你一整天愉快的出遊心情。</p>
<!-- 價格 -->
<div class="price">TWD 1600 每晚</div>
</div>
<!-- 定位元件 -->
<span class="tag">優質精選</span>
</div>
</div>
</body>
style.css：
/* 標籤設定 */
.product .tag {
background-color: #ff7878;
/* 文字顏色 */
color: #fff;
font-size: 12px;
/* 上下左右調整 */
padding: 2px 4px;
/* 圓角設定 */
border-radius: 4px;
/* 定位設定 */
position: absolute;
left: 8px;
top: 8px;
}
成果顯示：
微互動 ：
style.css：
/* Image container 圖片框設定*/
.image-container {
/* border: 1px solid #000; */
width: 100%;
/* */
display: block;
/* 修正圖片超出框框 */
overflow: hidden;
}
/* Product */
.product {
/* 陰影變化時間 */
transition: box-shadow 0.2s;
}
/* 微互動 */
.product:hover {
/* 加大陰影變化 */
box-shadow: 0 16px 72px rgba(0, 0, 0, 0.3);
}
成果顯示：
加入圖片時間 ：
style.css：
/* 加入圖片時間 */
.product .image-container .image {
transition: transform 0.2s;
}
成果顯示：
解決標籤圓角被覆蓋的情形 ：
style.css：
.product {
/* 解決圓角被隱藏的設定 */
overflow: hidden;
}
成果顯示：
超連結 ：
index.html：
<!-- 商品卡 -->
<a href="#!" class="product">
...
</a>
