---
title: '電商開發筆記'
disqus: Pai
---
# 壹、目錄及代辦事項
## Table of Contents
[TOC]
## 待學習項目
- [ ] -
- [ ] -
- [ ] -
- [ ] -
# 貳、首頁index
## 一、Navbar
### 1. 程式關鍵字
- navbar-expand-md:
將lg修改為md，當小於586px時，就會隱藏文字。
- order-md-1
一開始，我只有寫order-1，造成在"行動裝置"時這個屬性也存在，當下拉式選當出現時，購物車的圖示會跑到下拉式選項的下面。
因為，圖中的四個物件都包在container的flex屬性裡面，當在行動版仍顯示order-1，購物車的圖示一樣會跑到最後面。
因此要修改為只在大於md時使用order-1。
- mt-4 mt-md-0
因為BS4是以行動優先的設計，所以mt-4表示，在行動版時margin-top:1.5rem;，mt-md-0則為大於md寬度時，margin-top:0;
- img class="d-none d-md-inline-block"
用來行動版與桌面板切換logo大小圖
### 2. 新知識
- :not()
同一個命名的class中，當被not()指定到，{}內的屬性就不會指定到他。
<iframe height="265" style="width: 100%;" scrolling="no" title=":not()" src="https://codepen.io/PaiP/embed/povpgNQ?height=265&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/PaiP/pen/povpgNQ'>:not()</a> by 白家齊
(<a href='https://codepen.io/PaiP'>@PaiP</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
```htmlmixed=
<!-- ---navbar--- -->
<nav class="navbar navbar-expand-md navbar-light bg-white">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-0" href="#">
<img src="images/desktop/logo/logo-all-dark.svg" alt="" style="width: 220px;" class="d-none d-md-inline-block">
<img src="images/desktop/logo/logotype-lg-dark.svg" alt=" " style="width: 115px;" class="d-inline-block d-md-none">
</a>
<a href="#" class="nav-link d-flex order-md-1 ml-md-8">
<i class="material-icons align-item-center">
shopping_cart
</i>
</a>
<div class="collapse navbar-collapse mt-4 mt-md-0" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link px-6 text-center" href="#"><strong>首頁</strong><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link px-6 text-center" href="#"><strong>甜點</strong></a>
</li>
<li class="nav-item">
<a class="nav-link px-6 text-center" href="#"><strong>登入</strong></a>
</li>
</ul>
</div>
</div>
</nav>
```
## 二、Banner
### 1.關鍵字
- px-0 px-md-3
因為Navbar在.navbar-expand-md > .container,的屬性下有設定px-0，導致下方的Banner在md以下的狀態，會比Navbar略小，所以得設定px-0 px-md-3，讓行動版呈現px-0，大於md時則呈現px-3。
- bg-cover
設定
{
background-position:center center;
background-size:cover;
}
- col-10 -> col-4
因為圖片三張占了grid網格十格，所以先用col-10去取得10格的大小，之後再去用col-4分成三份。
```htmlmixed=
<div class="container px-0 px-md-3"><!--使用px-0把行動版container造成的padding消除，大於768px時再補px-md-3將版面padding補回去-->
<div class="bg-cover" style="background-image: url(https://bit.ly/2OhbMHr); height: 496px; position: relative; z-index: -100;">
<h1 class="text-hide">六角甜點店</h1>
</div>
<div class="row no-gutters justify-content-center">
<div class="col-10">
<div class="row no-gutters">
<a href="#" class="col-4 frosted-wrap">
```
### 2.新技術:frosted 毛玻璃特效
- frosted-wrap:對齊文字、&:after製作綠的覆蓋效果、&:hoever:after製作黃色的覆蓋效果
```scss=
.frosted-wrap{
margin-top: -70px; 使圖案往上推
height: 256px;
position: relative;設定這層為相對位置
overflow: hidden; 讓frosted-img超出的部分隱藏
z-index: 1;設定在背景圖片層上面
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
writing-mode: vertical-lr; 使文字排版方式變直式的
color:white;
transition: color 1s;
&::after{
content:" ";
position: absolute;依frosted為基底，在上面做絕對定位
top:0px;
bottom:0px;
right:0px;
left:0px; 將被景色撐開
background-color: rgba(63, 93, 69, 0.8);製作綠的覆蓋效果
z-index: -1;如果不設定會把文字覆蓋掉
transition:background-color .5s;
}
&:hover::after,
&:focus::after,
&.active::after {
content: "";
background-color: rgba(255, 255, 128, 0.8);製作黃色的覆蓋效果
}
&:hover,
&:focus,
&.active{
color: #3F5D45;
text-decoration: none;
}
```
- frosted-img:毛玻璃背景圖製作
```scss=
.frosted-wrap{
.frosted-img {
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;將背景圖向外多推10px，讓模糊的區塊向外擴散，再用外層的overflow:hidden去掉多餘的部分
z-index: -2;背景層在最下層
transition:filter .5s;
filter: blur(10px);使圖片模糊化
}
&:hover .frosted-img, 在frosted-wrap被hover、active、focus觸發時，frosted-img會變清晰
&:focus .frosted-img,
&.active .frosted-img{
filter: blur(0px);
}
}
```
- frosted-text:主要文字
```htmlmixed=
<a href="#" class="col-4 frosted-wrap">
<span class="frosted-text">人氣推薦</span>
<div class="bg-cover frosted-img" style="background-image: url(https://bit.ly/2Dwoxd7);"></div>
</a>
```
## 三、section
```htmlmixed=
<div class="mt-md-11 section">
<!-- 設定行動版出現的svg圖，一開始忘了在外層加上container，因為row的padding-left、padding-right:-15px屬性，
導致左右又向外長15px -->
<div class="container">
<div class="row">
<div class="col my-6 d-md-none d-flex justify-content-center">
<!-- img只要設定寬度，圖片就會依照比例呈現，背景圖就得設定高度或有內容撐開 -->
<img width="196" src="images/mobile/quote/sm-橫式-為什麼選擇了做甜點.svg" alt="">
</div>
</div>
</div>
<div class="bg-light">
<div class="container">
<div class="row">
<!-- 設定高度h-100、然後index-img-block使用margin-top、margin-bottom:-20px讓圖片凸出背景，並設定最
小高度250px，再轉換成行動版時就會切換成這個高度 -->
<div class="col-md-6">
<div class=" bg-cover h-100 index-img-block" style="background-image: url(https://bit.ly/2xPn7Eq);"></div>
</div>
<!-- vertical-content設定最大高度420px，撐開內容，並設定句子間的行距line-height:2.5 -->
<div class="col-md-6 d-flex vertical-content">
<!-- 使用兩個ml-auto會使div平均分成兩等分，內容向右靠齊 -->
<div class="writing-md-vertical py-md-10 py-6 text-secondary ml-auto">
<p class="">青山依舊在，幾度夕陽紅。慣看秋月春風。一壺濁酒喜相逢，浪花淘盡英雄。</p>
<p class="">是非成敗轉頭空，滾滾長江東逝水，白髮漁樵江渚上，古今多少事，都付笑談中。</p">
</div>
<div class="index-img-block d-none d-md-block ml-auto">
<img width="89" src="images/desktop/quote/lg-為什麼選擇了做甜點.svg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
```
- 一開始在做section時，一直找不到撐開內容的方法，一開始還直接對大圖下了高度。這會導致我在行動版時高度沒有辦法調整。
- 這個章節學到line-height的用法，line-height:2.5;代表一句文字+旁邊的間隔，會有文字大小的2.5倍寬度。
### 1.問題點
- 不懂(max-height:420px)放在兩個不同地方的差別
### 2.關鍵字
- ml-auto:
如果再同一個格線系統內，對兩個div下達ml-auto，這兩個div會平均分成兩個部分，並且向右靠齊。
```htmlmixed=
<div class="writing-md-vertical py-md-10 py-6 text-secondary ml-auto">
<p class="">青山依舊在，幾度夕陽紅。慣看秋月春風。一壺濁酒喜相逢，浪花淘盡英雄。</p>
<p class="">是非成敗轉頭空，滾滾長江東逝水，白髮漁樵江渚上，古今多少事，都付笑談中。</p>
</div>
<div class="index-img-block d-none d-md-block ml-auto">
<img width="89" src="images/desktop/quote/lg-為什麼選擇了做甜點.svg" alt="">
</div>
```
- img、h-100:
img只要設定寬度，圖片就會依照比例呈現，背景圖就得設定高度或有內容撐開。
h-100能使用是因為外層已經有撐開，此例中適用在destop的版本。
但在切換成mobile的版後，因為是直式的，沒有內容撐開，這時要設定min-height:250px;，不然圖片是出不來的。
- container-row-col
這對兄弟檔一定要在一起，我在設定行動版出現的svg圖，一開始忘了在外層加上container，因為row的padding-left、padding-right:-15px屬性，導致左右又向外長15px，在行動版時，下方出現x軸拖曳bar。
```htmlmixed=
<div class="container">
<div class="row">
<div class="col my-6 d-md-none d-flex justify-content-center">
<img width="196" src="images/mobile/quote/sm-橫式-為什麼選擇了做甜點.svg" alt="">
</div>
</div>
</div>
```
- vertical-content:
設定最大高度為420px，限制section版面的最大高度，而420px是由內容文字撐出來的，如果文字量不足，只會以右邊圖片"為什麼選擇做甜點"撐高。
設定max-height:420px而不用固定高度的方式，是因為在行動版的時候會變回橫式的，這時如果固定高度420px，文字沒那麼多，則會顯得版面很空。
因此適當的方式是設定一個最大高度，這個範圍內的高度就讓他自適應延伸。
```htmlmixed=
<div class="col-md-6 d-flex vertical-content">
<div class="writing-md-vertical py-md-10 py-6 text-secondary ml-auto">
<p class="">青山依舊在，幾度夕陽紅。慣看秋月春風。一壺濁酒喜相逢，浪花淘盡英雄。</p>
<p class="">是非成敗轉頭空，滾滾長江東逝水，白髮漁樵江渚上，古今多少事，都付笑談中。</p">
</div>
<div class="index-img-block d-none d-md-block ml-auto">
<img width="89" src="images/desktop/quote/lg-為什麼選擇了做甜點.svg" alt="">
</div>
</div>
```
## 四、shopblock
開始做時，我已經被圖片要固定高度還是撐開高度弄混淆了。
所以在圖片設定高度的地方弄很久，
但仔細看，高度無論在destop或mobile版本時，都一樣，這時就可以無所畏懼的去下固定高度了。
### 關鍵字
```htmlmixed=
<div class="col-md-4 mb-6 mb-md-9">
<div class="item-card border-0 rounded-0">
<div class="item-img bg-cover" style="background-image: url(https://bit.ly/2zBjQuq);">
<span class="item-badge">本日精選</span>
<div class="item-icon">
<input type="checkbox" class="d-none" name="like">
<i class="material-icons heart-border">
favorite_border
</i>
<i class="material-icons heart d-none">
favorite
</i>
</div>
</div>
<div class="d-flex item-border text-center">
<p class="col item-name">焦糖馬卡龍</p>
<strong class="col item-price">NT$ 450</strong>
</div>
<a href="#" class="btn btn-light item-btn rounded-0"><strong>加入購物車</strong></a>
</div>
</div>
```
- item-name
一開始在疑惑怎麼做出，名稱與價格中間的間隔線，原來只是用簡單的border-right。
```css=
.item-name {
border-right: 1px solid $light;
padding: 1rem;
font-size: 20px;
margin-bottom: 0;
}
```
## 五、subscribe
```htmlmixed=
<!-- --subscibe-- -->
<div class="bg-primary">
<div class="container">
<div class="subscribe row justify-content-center py-6">
<!-- justify-content-center justify-content-md-start原來還可以這樣用，BS4太強大了 -->
<div class="col-md-5 d-flex align-items-center mb-4 mb-md-0 justify-content-center justify-content-md-start">
<img width="40" src="images/desktop/logo/logo-light.svg" alt="">
<h3 class="h4 text-white ml-4 mb-0">訂閱你我的甜蜜郵件</h3>
</div>
<div class="col-md-5">
<div class="input-group">
<input type="text" class="form-control form-control-lg rounded-0 subscribe-search" aria-label="Input group example" aria-describedby="btnGroupAddon2">
<i class="material-icons subscribe-icon-mail">mail</i>
<div class="input-group-append">
<a class="input-group-text btn bg-warning border-0 rounded-0 subscribe-search-btn" id="btnGroupAddon2">
<i class="material-icons subscribe-icon-arrow">
arrow_forward
</i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
```
### 1.關鍵字
- col-5
將兩個div設為col-5，使用justify-content-center的屬性，就能使左右各留一格的空白。
- justify-content-center、justify-content-md-start
原來還可以這樣切換行動與桌面板，BS4太強大了
## 六、footer
使用col-5、col-5和justify-content-center的技巧div置中。
再使用text-right把右邊的區塊移動到最右邊。
一開始我的想法是讓logo和lologo地址欄佔4欄col-4，他的前面我再給他多一欄空欄col-1，而右邊的"今天是個吃甜點的好日子"則是佔兩欄，並且對他用ml-auto。
```htmlmixed=
<!-- --footer-- -->
<div class="bg-light">
<div class="container">
<div class="row footer justify-content-center">
<div class="col-md-5">
<img src="images/desktop/logo/logotype-lg-dark.svg" width="172" alt="" style="margin-top: 39px;">
<ul class="list-unstyled mt-15 mb-0">
<li>07-1234-5678</li>
<li>sweetaste@email.com 800</li>
<li>高雄市新興區幸福路 520 號</li>
</ul>
</div>
<div class="col-md-5 text-right mt-6 d-none d-md-block">
<img src="images/desktop/quote/sm-今天是個吃甜點的好日子.svg" alt="" width="60">
</div>
</div>
<div class="row justify-content-center align-items-end py-6">
<div class="col-md-5">
<img src="images/desktop/icon/ic-line@.svg" alt="" width="32">
<img src="images/desktop/icon/ic-facebook.svg" alt="" width="32">
</div>
<div class="col-md-5 mt-2">
<p class="text-md-right mb-0">© 2018 Sweetaste* All Rights Reserved</p>
</div>
</div>
</div>
</div>
```
# 參、check付款頁面
## 七、行動版時跑版問題
### 1. 為什麼跑版?
- 為了讓行動版時，整個版面填滿頁面，要把預設多的gutters去掉(左右兩側的白邊)
- 原本的寫法container(px:15)->row(mx:-15px)->col(px:15px)
- 15-15+15=15，一定會在左右多出15px的gutter。
### 2. 怎麼去除?
- **錯誤想法**: 一開始是想從container下手，class="px-0 px-md-2"，行動版時把padding消除，變成桌面板時再補回來就好。
這樣做白邊確實可以消除，但是下面x軸多出來拖曳軸了。
原來是如果一開始把container的padding消除後，就沒有px:15px和row的mx:15px互相抵消，導致版面又向左右長了15px。
- **老師的作法**:
在col內在加一行negative-row-margin(mx:-15px)，去抵銷col的px:15px，之後變成桌面版後再用mx-lg-0恢復。
- **我的作法**:
直接在col加上px-0 px-md-2的屬性，直接消除掉col原本的屬性。
Sign in with Wallet
Connect another wallet