# chatTalker 切版筆記

這是參加六角學院的公益營，作業任務之一的chatTalker聊天機器人，一些切版過程記錄筆記

作業網址：GitHub Repo點[這裡](https://github.com/iamAmberhh/chatTalker.git)、GitHub Pages點[這裡](https://iamamberhh.github.io/chatTalker/)

css大部分都是用bootstraps5完成，作業目標是RWD不能出現X軸，所以先來複習一下我自己卡關很久的「相對定位&絕對定位」

## 觀念複習1

### 相對定位 relative
* 以元素本身所在的位置作為定位點，去進行相應的移動
* 元素移動但仍會佔據原本的位置，並未提高圖層，其他元素的位置不受影響

### 絕對定位 absolute
* 需要給一個定位點，依照定位點進行移動，故經常在父元素加上relative作為定位點
* 以父元素為錨點時，絕對定位的元素只會在父元素範圍內移動
* 如果在父元素沒有找到定位點，會依據body左上方為錨點進行定位
* 元素不佔據任何空間，因為「提高了一個圖層」，其他元素會因此補位造成版面移動

## 觀念複習2

我在vs code上用Go live檢視圖片時，完全沒問題，結果上傳到Github所有圖片都消失了(🙀，驚慌失措之下，學電腦出身的老爸說：「你這是路徑錯了吧」，所以接下來要複習圖片的 **相對路徑&絕對路徑**

### 相對路徑
* `./ ` 同層目錄下的檔案，或直接輸入檔名
* `../ ` 回到上一層目錄尋找檔案

### 絕對路徑
*　` / ` 電腦最底部的根目錄
* 圖片網址

詳細教學附上六角學院的影片 [Youtube](https://www.youtube.com/watch?v=tbnpDisJ4bs)


像我是把圖片放在image資料夾，css放在scss資料夾，在_index.scss中寫background-image的時候就要特別注意，要跳出scss資料夾，再進到image資料夾，才能順利抓到圖片的相對路徑！

OK 複習結束！

---

## 過程卡關&解法：
切版的部分每個人設計上會有不同想法，這邊就只記錄我卡關的部分，以及我最後如何解決，首先是介紹chatTalker功能的這個區塊，當時真的不知道哪裡想不通...就是卡了很久😭


這邊的做法是先下row、col-lg-6分成兩個區塊，這邊有用flex-lg-row-reverse，所以會先寫右邊的區塊

**右邊區塊**

一開始想直接用block特性，加上justify-content-center和align-items-center的排版讓文字和按鈕置中，沒想到按鈕會因此變成占滿整排😅(和文字一樣寬)，所以改在外層多加上一個div包住所有內容，然後把flex設置在上上層的div上就不會有按鈕變形的問題了！

<div class="col-lg-6 d-flex justify-content-center align-items-center text-center text-lg-start mb-4 mb-lg-0">
　　<div>
　　　　<h2 class="fw-bold mb-2">快速了解客戶輪廓<br>建立品牌流量池</h2>
　　　　<p class="fz-7 mb-lg-3 mb-2">深入用戶日常，成為用戶貼身好友<br>精準傳遞品牌資訊，打造個人化專屬服務<br>不知不覺深入用戶生活，成為用戶貼心的好朋朋:D</p>
　　　　<a href="charge.html" class="btn btn-primary text-white rounded-pill px-4">方案費用</a>
　　</div>
</div>

**接下來是左邊區塊**

左邊用ul>li結構，li內用bootstrap5的卡片元件去排版，但外層li在設計的時候，要考慮RWD的配置，一直計算col-lg-＊，還老是跟外層的col-lg-6看錯、改錯....(心力交瘁)，最後算的我頭昏眼花還是沒算好，直接改用row-cols一次解決！(後悔太晚想起它)

**複習一下 col-＊和row-cols-＊的區別**

col-* 是在隔線系統中(這裡算12格)，該區塊要占用多少欄位
均分的話就是col-6，分三等份是col-4，分四等份是col-3

row-cols-* 則是直接在row的位置決定好要將col分成幾個區塊
像這次版型是手機版占1欄，576px以上占2欄，就會寫成row-cols-1、row-cols-md-2
比起計算col-＊直覺許多，也不會算錯了

**回到左邊區塊的內部排版**

icon外圍的邊框一開始想用圖片推padding再加上陰影，失敗告終，改用div包住圖片，並且給div設固定的寬高，再加上陰影版型就不會跑掉


最後就是差點把我折磨至死的背景圓球，一開始我用div的background-image去設，然後position-absolute去調整位置，但還是會破版出現X軸，為了不讓它超過偷用了overflow-hidden...，但還是被老師退件，所以再度卡關好多天...

後來看到[這篇](https://hoyis-note.coderbridge.io/2021/06/16/%E9%97%9C%E6%96%BCBackground-image%E8%88%87%E9%9F%BF%E6%87%89%E5%BC%8F/)background-image的教學，以及參考同學的範例，發現只要把調整位置的position-absolute，改成用background-position去做，就不會有X軸的問題了(灑花🥳

### 老師的部分建議
* banner 部分給你個課題，我們肉眼第一個看到 section 通常都是最重要的，或許可以嘗試 banner 用 100vh 來佈局整個 header 佔滿來設計，往下滾才會看到「三大平台，我來搞定」

>我在bootstraps5裡面找到有vh-100、vw-100的class名稱，直接套用，參考文件點這裡

* 斷點，請都不要用 max-width，請都用 min-width，可沿用 bootstrap5 變數 [breakpoint mixin](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/)

>以前習慣用的max-width是指在某個寬度「以下」，則採用設定的樣式，bootstraps是響應式優先，所以會採用min-width，思考上就會變成畫面到達某個寬度「以上」時，採用設定的樣式

以上就是這次作業的筆記啦！