※ 解構元件：
思考：如何把設計稿分解成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
.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%);
}
顯示成果：
