盒模型 – 商品卡元件製作

奧莉薇

更新於 2025/07/27發佈於 2025/07/27閱讀時間約 12 分鐘

※ 解構元件：

思考：如何把設計稿分解成HTML的結構。

圖片結構分析：

卡片最大的陰影區是一個大盒子。
卡片分成左右兩個部分，左邊是中等盒子，右邊是裝圖片的盒子。
左邊文字區塊（包含標題、價格、簡介、按鈕）。
右邊圖片區塊（盤子上有玫瑰花瓣）。

結構圖：

※ 商品卡實作：

建立專案資料夾：

mkdir product_card

建立CSS資料夾：

建立images資料夾：

建立index.htm檔案：

在CSS資料夾中建立style.css：

建立初始化資料夾：

normalize.css網址：https://necolas.github.io/normalize.css/

啟始設定：style.css

說明：是針對元素的選擇標籤做設定。

*{} /* Global */
* {
  box-sizing: border-box;
}

說明：

「＊」指的是全域設定。
這設定是為了讓盒模型，是以邊界為準的盒模型。

超連結設定：style.css

/* 超連結設定 */
a {
  text-decoration: none;
  color: #000
}

標題和段落元素：index.htm

<body>
  <a href="123456"></a>
  <p>123456</p>
  <h1>123456</h1>
  <h2>123456</h2>
</body>

建構html結構：index.htm

左邊文字區塊（包含標題、價格、簡介、按鈕）

<body>
   <div class="wrapper">
    <div class="product">
      <div class="info">
        <h1 class="name">Cup'o John</h1>
        <h2 class="price">$2.5</h2>
        <p class="des">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius impedit omnis nam sed repellendus
          ducimus?</p>
        <a href="#" class="btn">ORDER</a>
      </div>
      <div class="image"></div>
    </div>
  </div>
</body>

說明：wrapper用來幫整個網頁或某個區塊建立結構性外框，方便做整體排版與樣式控制。

初步成果：

高度滿版設定：style.css

html,body {
  height: 100%;
}

背景容器設定：style.css

.wrapper {
  height: 100%;
  background-color: #ccc;
  background: linear-gradient(#EF9FBF, #F9DED7);
}

說明：

background-color: 設定背景為單一色彩。
background: linear-gradient();：設定漸層背景，可以從一種顏色逐漸過渡到另一種，甚至多種。

顯示成果：

Product Card設定：style.css

.product {
  width: 800px;
  height: 540px;
  background-color: #fff;
  box-shadow: 0 20px 80px 0 rgba(0, 0, 0, 0.5);
}

說明：

rgba() 是用來設定「顏色 + 透明度」的工具，適合用在背景色、邊框、文字等地方，讓介面看起來更有層次感。
r：紅色成分（0–255）
g：綠色成分（0–255）
b：藍色成分（0–255）
a：透明度（0–1）【0 是完全透明、1 是完全不透】
網頁的座標系統：網頁的原點 (0,0)在左上角，所以它的X軸是向右為正，Y軸是向下為正。
座標系統原理對應陰影方向：

X 軸向右為正 👉 控制陰影的左右偏移。
Y 軸向下為正 👉 控制陰影的上下偏移。
所以當 box-shadow 的 Y 值是正數，光源從上照下就代表陰影會往下偏移。如果你想讓陰影往上，只要把 Y 值改成負值就行：box-shadow: 0px -6px 10px rgba(0, 0, 0, 0.3);

顯示成果：

Product Card置中設定：style.css

.product {
  display: block;
  margin-left: auto;
  margin-right: auto;}

說明：水平置中要滿足下列三項條件才能成功

display:block;
要有寬度值設定
margin水平方向 auto

顯示成果：

Product Card往下設定：style.css

.product {
  margin-top: 128px;}

顯示成果：

Product Card內容和照片設定：style.css

.product .info {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 64px 56px;
  background-color: #f9f9f9;
  height: 100%;
}

.product .image {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  height: 100%;
}

顯示成果：

Product Card照片設定：index.htm

<div class="info">
        <h1 class="name">Cup'o John</h1>
        <h2 class="price">$2.5</h2>
        <p class="des">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius impedit omnis nam sed repellendus
          ducimus?</p>
        <a href="#" class="btn">ORDER</a>
      </div
     //解決4px間隔
    ><div class="image"></div>
    </div>
<div class="image"><img src="./images/rose_coffee.png" alt="">
</div>

顯示成果：

解決照片超出範圍：style.css

.product .image {
  /* 解決圖片超出的部分 */
  overflow: hidden;
}

顯示成果：

調整照片大小：style.css

.product .image img{
  height: 100%;
  display: block;
}

顯示成果：

處理文字部分：style.css

/* 調整文字內容 */
.product .name{
  font-size: 100px;
  font-weight: 300;
  color: #444;
  white-space: nowrap;
  margin-bottom: 16px;
  text-shadow: 0 48px 10px rgba(0, 0, 0, 0.05);
}

顯示成果：

處理價錢部分：style.css

/* 調整價錢 */
.product .price{
  font-size: 48px;
  font-weight: 300;
  color: #EA4C73;
  margin-bottom: 16px;
}

顯示成果：

處理說明部分：style.css

.product .des{
  font-size: 16px;
  line-height: 24px;
  color: #666;
  margin-bottom: 16px;
}

顯示成果：

處理定位元素與層級設定：style.css

.product .name{
  /* 定位元素與層級設定 */
  position: relative;
  z-index: 10;
}

顯示成果：

處理按鈕設定：style.css

.product .btn {
  display: inline-block;
  /* way1 */
  padding: 12px 40px;
  line-height: 24px;
  /* wqy2 */
  /* text-align: center */
  /* width:width: 200px; */
  text-decoration: none;
  font-size: 24px;
  letter-spacing: 8px;
  color: white;
  box-shadow: 0 8px 40px 0 rgba(0,0,0,0.5);
  background-color: #EA4C73;
}

顯示成果：

解決margin塌陷的問題：style.css

/* 背景容器設定 */
.wrapper {
  overflow: hidden;
}

顯示成果：

設定卡片圓角：style.css

/* 卡片圓角設定 */
  padding: 16px;
  border-radius: 4px;

顯示成果：

使用漸層產生器：style.css

網址：https://cssgradient.io/

.product .btn {
  background: -webkit-linear-gradient
  (45deg, rgba(250, 195, 209, 1) 0%,
   rgba(250, 105, 146, 1) 38%, rgba(230, 120, 149, 1) 39%, 
  rgba(234, 76, 116, 1) 57%, 
  rgba(234, 76, 116, 1) 72%, rgba(250, 195, 209, 1) 100%);
}