---
tags: 2021程式體驗營
---
# 切版紀錄-香水電商v2 / 放森精油
<!-- 體驗營直播-第三堂RWD -->
## 簡介
" 放森精油 " 以手刻方式撰寫 HTML、CSS、SCSS、RWD，內容為個人切版練習。

原設計稿為"程式體驗營" 所提供的版型-“香水電商”，主要為切版練習，切版完我再更換主題內容圖片等。

主題發想是來自剛上幼兒園的侄兒，正在學習寫字塗鴉，他說他畫的是老虎不是兔子，玩鬧過程中，發現侄兒寫字風格很適合手作、生活類的風格，然後就我一筆啊他一畫的完成了品牌LOGO，還交代我如果精油品牌有賺錢，要分紅給他，很明顯就是個精明的孩子，哈哈哈

## 設計稿、講義、圖片資源
* [設計稿:香水電商xd](https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/)、[第三堂hackmd講義](https://hackmd.io/@hexschool/rkKqYCHs_)

* 圖片unsplash [d'perfume](https://unsplash.com/collections/11580214/d'perfume)、[essential-oil](https://unsplash.com/s/photos/essential-oil)、[logo](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/d%E2%80%99Perfume.png)、[banner](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index1.jpg)、[產品1](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index2.jpg)、[產品2](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index3.png)、[產品3](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index4.jpg)、[產品4](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index5.jpg)、[產品show1](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index6.jpg)、[產品show2](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index7.jpg)、[產品show3](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index8.jpg)、[訂閱](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index10.jpg)、[footer](https://hexschool.github.io/webLayoutTraining1st/perfume-week6/d%E2%80%99Perfumewhite.png)

* 參考[檜山坊](https://www.bio-god.com.tw/)、[森林島嶼](https://www.forestmosashop.com/)、[福森](https://www.fussenaroma.com/)

## 作品
香水電商: 我的展示[demo](https://carefree0906.github.io/d-Perfume/index.html)、[我的github](https://github.com/carefree0906/d-Perfume)

放森精油: 我的展示[demo](https://carefree0906.github.io/fussen/)

## RWD 重點教學
* container 容器概念講解
* display 使用時機
* flex 首頁產品反轉
* Flex 佈局運用([PC](https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/screen/0d43336d-a74a-44c2-9a89-183af35b25da/specs/)、[Mobile](https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/screen/6e868c2c-5eb7-4464-84d4-15d333631f91/specs/))、[Flex 測試]([https://](https://codepen.io/peiqun/pen/WYzzYX))
* [Icon-Google fonts](https://fonts.google.com/icons?selected=Material+Icons:store)

<span class="material-icons">store</span>
<span class="material-icons">person</span>
<span class="material-icons">favorite</span>
<span class="material-icons">shopping_cart</span>

## 全域設定
[首頁滿版 Banner 設計](https://youtu.be/1EYUsAlVqY0)後半段
conatinaer 是拿來當容器寬度設定與置中用，
中間區塊手機版 會左右向內推padding 15px，所以尺寸設定1110+左右padding30=1140px

.container{
    width:1140px;
    padding-left:15px;
    padding-right:15px;
}

## header
### header-display使用時機

* 前三個選單:
(1) icon與文字用span包起來
(2) 手機版隱藏span{display: none;}，用漢堡選單 **(待補)**

* 購物車
(1) icon桌機版手機版都有
(2) Cart(3)用span包起來，手機版隱藏span (同上)
(3) 3用em包起來，桌機版隱藏手機版打開，3改圓型白字，定位在li a(32:28)(41:46)

* 購物車定位(44:51)
li a position:rel
em position:absolute
em要加寬高
* li加m-none 768px隱藏

* h1.logo>a[href="#"]>img



### header-選單用emmet$產生假字
(37:02 38:24)
ul.menu>li*4>a[href="#"]{選單$}

## banner
.banner設定背景圖
.bannerContent設定display:flex，讓內層.bannerText文字靠右
.bannerContent .container 置中用

## flex 首頁產品反轉
* 桌機版-圖片跟文字錯開排版，手機版時改成圖上文下呈現，
寫html結構時圖上文下，另外寫.row-reverse用flex改變方向來排版(重要觀念）(10:35)

* nth-child效能吃重不建議使用(16:00)

    <div class="product">
        <div class="productPic">
            <img src="#" alt="index3">
        </div>
        <div class="productText">
            <h2>xxx</h2>
            <p>xxx</p>
            <a href="#">xxx</a>
        </div>   
    </div>
    
    <div class="product row-reverse">
        <div class="productPic">
            <img src="#" alt="index4">
        </div>
        <div class="productText">
            <h2>xxx</h2>
            <p>xxx</p>
            <a href="#">xxx</a>
        </div>
    </div>


## 會員中心
這頁也是一樣用flex改變方向，桌機用row-reverse、手機column（23:16這裡也可以用order，不過order通常是用在改變排序例如12345變成15234，這裡用軸向會比較方便）(19:50)

## 產品介紹CHANEL
* 產品介紹頁手機版img圖片移到上方
解法: 在chanel上方再加一張img 桌機版display:none;手機版display:block(35:20)


## 漢堡選單JQ
下拉選單 jQ 資源(48:36)

寫的時候要邊寫或想好手機版怎麼處理

切版+js
切版如果花一個月js2.5月
切版如果花2個月js5月
[Chomer網頁除錯大解密](https://www.udemy.com/course/chrome-devtools/)
可在f2e時光屋找切版素材 上面很多

## 練習紀錄
20210823 run2
* icon: 第一次練習時一直找不到google icon，改用fontawesome，今天一看設計稿就看到了 哈
`<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">`

`<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">`

* font: 設計稿用蘋方只有mac才有
`<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap" rel="stylesheet">`

`font-family: "Noto Sans TC", sans-serif;`

* banner-文字靠右，需要用一層banner-text包起來，不要跟container寫同一層

<div class="banner">
  <div class="bannerContent container">
     <div class="banner-text">
      <h2>Perfume your day</h2>
      <p>A perfume is like a piece of clothing, a message, a way of presenting oneself a costume that according to the person who wears it.</p>
      <a href="#">Shop now</a>    
    </div>   
  </div>   

* banner-滑入用背景顏色rgba寫

.banner a:hover{
  background: rgba(255, 255, 255, .2);  
}

* product-圖片排法不熟悉，每次都忘記，先設定容器大小，再設定圖片塞滿容器置中 (若用bg-img寫法不同)

/*先設定容器大小*/
.product-pic{
  width: 555px;
  height: 555px;
}

/*圖片塞滿容器置中，若用bg-img寫法不同*/
.product-pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0;
}

* product-show-產品soldout
* 背景設定顏色+透明度
* 將soldout文字定位在li就可以了，第一次練習卡很久，為了這區塊圖片改用bg，
第二次練習只要觀念打通就順很多，用img標籤即可

<li class="soldout-relative">
    <img class="soldout-bg" src="https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index8.jpg" alt="index8">
    <div class="soldout">sold out</div>   
    <h2>Apple Cider Vinegar Capsule</h2>
    <p class="fz-1">Tonik</p>
    <span class="fz-1">NT$1,580</span>
</li>

.product-show-ul .soldout-relative{
  position: relative;
}
.product-show-ul .soldout{
  position: absolute;
  top: 252px;
  left: 125px;
  color: #fff;
  font-size: 24px;
  line-height: 36px;
}

* 訂閱subscribe-
* 背景圖片常忘記設定方式
* input也常忘記
* 第一次練習input和a的邊框線沒對齊，第二次把原本input的邊框線設定none

`<input type="email" placeholder="Your email address" required="">`

.subscribe{
  width: 100%;
  height: 600px;
  background-image: url("https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index10.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

---

* 響應式圖片
一種有了新歡忘了舊愛的感覺...切好首頁要改響應式時居然忘了..bnnner圖片高度怎麼設定，於是回頭看rwd課程，寫完[筆記](https://hackmd.io/lZidSTqhQtSj_JJpCgx0Aw)再回來繼續 (嘆)

* media
斷點可設定992、768、414px

@media (max-width:375px){
  .banner{
    padding-top: 101px;
    padding-bottom: 138px;
  }
}

* container要設定max-width
.container{
max-width: 1140px;
}

* product
手機版圖上文下
在桌機的時候已經用class row-reverse寫
flex-direction: row-reverse;
手機只要改回display:block;就可以