[ JavaScript 試煉之旅系列 ](https://ithelp.ithome.com.tw/users/20120099/ironman/2593) [初學者跪著學JavaScript系列](https://ithelp.ithome.com.tw/users/20123461/ironman/4760) 陸續整理，這些文章都對JS觀念建立非常有幫助。 常常查資料都會找到！
## 前情提要 有鑑於有些人還是需要考丙級網頁 雖然是使用過時的DW 這邊還是貼出教學影片 提供參考  ## 影片資源 [YT教學系列連結](https://youtu.be/7bM1kjRayB8) ## 心得 很喜歡這種熱心分享的頻道 大多是默默耕耘的老師 實在是網路界的一大佛心人之一 就算沒有看內容 也很感恩(,,・ω・,,) 未來有機會我也來用其中的網頁切版 示範怎麼手刻出來好了 應該挺有趣的XD ## 額外補充 最近在研究關於SPA的技術 這個影片示範的還不錯 很簡陋 簡易 鍵盤敲打的聲音很好聽(誤 紀錄一下  [SPA教學](https://youtu.be/5HgMIP5tarE)
有幾位同學已經寫完系列一～九的全部作業了 整體能力已經可以準備開始面試前端工程師的職缺了 這邊寫一篇簡單說明 # 需要補充的技能 前端技能中最困難的部份已經有相當基礎了 剩下有些東西沒那麼難，但要學一下，上班會用到 這些東西我未來可能會寫教材，但我最近很忙，近期無法寫新教材 ## git 程式碼版本管理工具，找書或者上網找文章學一下，至少要會 add commit push pull 這些指令 ## npm 作業都是用線上環境，實際開發都是在本機為主，需要知道 javascript 套件管理工具 npm 怎麼用 ## create-vue https://github.com/vuejs/create-vue 要能在本機架起來 vue 開發環境，這款至少要知道一下 ## vue 3 教材安排是學 vue 2，但現在很多公司都已經轉用 vue 3 語法了 背景知識大同小異，但語法差異不少，要知道一下怎麼轉成 vue 3 寫法 --- 老樣子，學的時候有點一知半解沒關係，大概會用就好，畢竟是面試 junior developer 的職缺，公司通常會有工程師同事，技術長＆他們會協助你實務上的細節 # 投履歷的公司篩選 在找工作的時候，投那種「無經驗可」的職缺 很多公司會寫「一年以上工作經驗」，這種就是不歡迎半路出家剛學完者 因為很多人從補習班畢業之後，連 hello world 都寫不出來，公司想要避免遇到這種人 就先投「無經驗可」的職缺就好 公司類型基本上有分「接案公司」、「做自己公司產品」兩種 第一份工作沒差，去接案公司練功、去做自家產品慢慢打磨產品，都可以，待個半年，先進入業界再說，都可以學到很多 長期來講，我之後再寫文章說明差異 # 履歷表的寫法 基本上你照自己習慣寫，簡潔有力即可，這行業基本上是實力主義，唬爛幫助不大 但有幾個東西務必要寫進去 ``` 學習的過程中，為了瞭解網頁的基礎，而不只是當個框架的使用者，我有用純 html/javascript 練習多個元件 [附上第三課全部作業] 並且有找一些看起來很紅的業界套件，練習導入使用 [附上第四課全部作業] 然後我有用 vue 寫了多個應用程式練習 [附上第八課全部作業] 還有試著拿 vue 生態系的元件庫做範例，模仿做了幾個元件 [附上第九課全部作業] ``` 我認為履歷表附上這些東西，會讓99%的面試官印象深刻，覺得你幾乎是「即戰力」，對你更有信心 # 結語 以上，如果你寫完系列一～九全部內容了，那我認為你離上班已經很接近了 如果正在準備轉職，準備一下，試著投一些履歷試試看，試試水溫 不用急著辭職，因為今年全球景氣充滿不確定性，但就試試看能收到多少面試邀請，等於秤秤自己的斤兩，比較有個底 順利上班之後記得來寫文章分享心得 然後最好養成習慣寫技術部落格，直接在這邊寫即可 求職過程有疑問，一樣多多來這邊發問即可 求職卡關、面試不順、薪資待遇有疑慮、業界實務有困惑，都上來發問即可 我會視情況公開 or 私下回答 以上，有打算轉職的同學，祝大家早日上班囉～
https://codelove.tw/courses/contents 列出全部系列的每一課標題 方便大家複習翻閱
恭喜你完成了一系列酷炫的元件 Quasar 是業界最頂尖、好用的 UI 元件包之一 你在這系列作業中，也順便學習了此元件包的用法，這在實務上非常有幫助 你甚至親手製作了其中一些基本的元件，讓你大致了解元件包背後的製作原理 像這些最基礎的 UI 元件，因為通用性很高、很常被重複用到、在多個地方到處使用，所以很適合製作成元件 --- 但是，在實務上，通常開發一個頁面，就製作一個 vue 檔案即可。除了基礎 UI 元件之外，並不會額外製作多少元件 因為頁面上很多看起來像元件的東西，其實就算拆出來，別的頁面也用不到、或根本無法使用 這種情況，其實也不用刻意要拆成元件，因為意義不大，說不定還會變更亂。切記：不需要為了元件化而元件化 當你發現頁面真的有點太複雜、你明顯感受到拆成多個元件會比較好維護的時候，再拆成元件就可以了 --- 翻閱 Vue 官方文件，你會發現 `Components In-Depth` 這個段落，你幾乎通通讀完了 有些我認為非必要、沒那麼常用的段落，就沒有指定讓你閱讀。你如果好奇的話，就自行把官網剩下的頁面翻一翻吧 必要的元件觀念，你都已經知道了，這些已足夠讓你參與團隊合作、與團隊一起開發應用程式了 但是在真正大型的專案，還需要引入一些進階觀念、生態系工具 這些會在後續的課程提到！ --- 消化、研究完本課程之後，我認為你已經具備入行前端工程師的基礎能力了！ 急著上班、找工作的同學，請參考我寫的文章： **給寫完 JavaScript 系列九的同學們：求職前的準備＆簡易指南** https://codelove.tw/@howtomakeaturn/post/k31dYx 再次恭喜你順利完成本系列轉職前端課程，祝你求職順利！ 有問題可以多多上來發問！
## 課程目標 - 學習開發狀態複雜的 vue 元件 ## 課程內容 前面的課程中，元件的狀態很單純，數量也很少 但是有些元件，雖然對外溝通的狀態很少 但是在元件內部，其實需要維持額外的多個狀態，才能使用 比方說「顏色選擇器」類型的元件：雖然對外就一個代表色碼的字串而已，但在內部需要不少狀態來維持 ## 課後作業 這一課作業，請先看一下 Color Picker 元件的用法 https://quasar.dev/vue-components/color-picker --- 請使用官方的元件試玩工具：Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyColor.vue` 元件，並支援下列功能 - `v-model` 能夠設定色碼、取得色碼，格式支援 HEX 即可，例如：經典藍 `#34568b` - 不用支援各種花俏的顏色選擇面板，就做 RGB 三捲軸就好了：使用 `<input type="range">` 製作三個可以拉動的捲軸，分別代表紅色、綠色、藍色的比例 - 請自行搜尋 `hex to rgb javascript` `rgb to hex javascript` 研究 hex 色碼與 rgb 色碼如何轉換 完成之後，請在 `App.vue` 之中匯入此元件，並用多個範例證明，有完成上述規格 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 學習用外部狀態管理 vue 元件 ## 課程內容 前面的課程中，元件的狀態很單純，都是匯入之後直接使用 但是有些元件匯入之後，一開始在畫面上是不顯示的 比方說視窗類型的元件：這種元件需要額外有一個狀態，來管理它是否顯示 ## 課後作業 這一課作業，請先看一下 Dialog 視窗元件的用法 https://quasar.dev/vue-components/dialog --- 請使用官方的元件試玩工具：Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyDialog.vue` 元件，並支援下列功能 - `v-model` 能夠管理視窗是否顯示 - `預設的 slot` 能夠放入視窗內容 完成之後，請在 `App.vue` 之中匯入此元件，並用多個範例證明，有完成上述規格 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 學習 vue 的 slots ## 課程內容 來學一下 slots 的用法 - https://vuejs.org/guide/components/slots.html ## 課後作業 這一課作業，請先看一下 Banner 公告元件的用法 https://quasar.dev/vue-components/banner --- 請使用官方的元件試玩工具：Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyBanner.vue` 元件，並支援下列功能 - `預設的 slot` 能夠放入公告內容 - `action slot` 能夠在下一排最右側放入額外內容 - `rounded` 樣式 完成之後，請在 `App.vue` 之中匯入此元件，並用多個範例證明，有完成上述規格 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 學習 vue 的 v-model ## 課程內容 來學一下 v-model 的用法 - https://vuejs.org/guide/components/v-model.html 老話一句，不要把這功能想得太神奇 這只是一種 props + events 的縮寫而已 功能完全一樣，只是讓元件更方便使用而已 如果真的很不喜歡，實務上完全不用，其實也不會怎樣 ## 課後作業 這一課作業，請先看一下 Input 輸入元件的用法 https://quasar.dev/vue-components/input --- 請使用官方的元件試玩工具：Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyInput.vue` 元件，並支援下列功能 - `v-model` 能夠設定值、取得值 - `label` 能夠設定欄位名稱（可以不用像 Quasar 動畫那樣華麗，就簡單顯示在旁邊即可） - `filled` 樣式 - `outlined` 樣式 完成之後，請在 `App.vue` 之中匯入此元件，並用多個範例證明，有完成上述規格 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 學習 vue 的 events ## 課程內容 來學一下怎麼替元件設計事件 - https://vuejs.org/guide/components/events.html ## 課後作業 這一課作業，請先看一下 Button 按鈕元件的用法 https://quasar.dev/vue-components/button --- 請使用官方的元件試玩工具：Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyButton.vue` 元件，並支援下列功能 - `color` 能夠設定背景顏色 - `text-color` 能夠設定文字顏色 - `label` 能夠設定文字內容 - `size` 能夠設定按鈕大小 - `round` 樣式 - `square` 樣式 - `@click` 能夠設定點擊後的任務 完成之後，請在 `App.vue` 之中匯入此元件，並用多個範例證明，有完成上述規格 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 學習 vue 的 props ## 課程內容 來學一下怎麼傳參數到元件裡面 - https://vuejs.org/guide/components/props.html 順帶一提，在實務中，我個人是從來不寫 Prop Validation 的 我不去寫 Runtime Type Checks 那些，因為我覺得很麻煩、很花時間 當然，在很多人眼裡，我這種習慣很糟糕 我有我的理由，不過嚴重超出本課程度，未來有機會再談吧 ## 課後作業 在第二課～第七課的作業，我們要研習一款叫做 Quasar Framework 的工具 這是一個極度強大的 vue 元件工具，功能非常豐富、好用 我們每一課的作業，都要試著親自做出類似 Quasar 中的元件 （沒辦法做到像 Quasar 那麼強大，我們只要實作部分功能就好） 這一課作業，請先看一下 Badge 徽章元件的用法 https://quasar.dev/vue-components/badge --- 請使用官方的元件試玩工具：Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyBadge.vue` 元件，並支援下列功能 - `color` 能夠設定背景顏色 - `text-color` 能夠設定文字顏色 - `label` 能夠設定文字內容 - `rounded` 樣式 完成之後，請在 `App.vue` 之中匯入此元件，並用多個範例證明，有完成上述規格 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠運行 Vue 元件 ## 課程內容 我們一樣讀官網文件就好 先來讀元件基本觀念 https://vuejs.org/guide/essentials/component-basics.html 再來讀註冊元件的方法 https://vuejs.org/guide/components/registration.html 再來讀元件的檔案格式 https://vuejs.org/guide/scaling-up/sfc.html 我鼓勵你習慣去讀英文，但實在不行就讀中文沒關係 https://cn.vuejs.org/guide/essentials/component-basics.html --- 在我的課程中反覆說過很多次 官網文件中各種內容很多，大部份看不懂沒關係，稍微有個印象就好 很多內容學了，其實根本實際上也很少用到 留個印象，遇到問題大概知道去哪翻閱就可以 整個程式設計師生涯，就用這種態度即可，沒問題的 --- 很多時候，甚至一知半解，也沒關係，根本不重要 舉個例，官網有時候會這樣寫 ``` <ButtonCounter /> ``` 有時候會這樣寫 ``` <button-counter></button-counter> ``` 官網有說明，分別在什麼時候，建議哪種寫法比較好 老實說，那些說明，連我都看不太懂，我也不認同官網的建議 我建議你就隨便寫，能跑就可以了 上過我前面課程的話就知道，我對 Vue 的許多設計細節，充滿意見、不認同 但是這個行業就是這樣，大家都充滿主觀看法，工具本身也充滿主觀看法 這些很正常，並不妨礙你成為一個專業的程式設計師 反正，框架的背後，就是會轉換成你在系列一～六學過的那些：DOM 操作、事件處理、狀態管理，就這樣而已 ## 課後作業 請使用官方的元件試玩工具：Vue SFC Playground https://sfc.vuejs.org/ 這一課我們來試著匯入元件就好 - 請建立 `Header.vue` `Main.vue` `Footer.vue` 三個元件 - 元件內容分別顯示 `I am header!` `I am main!` `I am footer!` 就好 - 在 `App.vue` 之中匯入以上元件 做出以上功能，你就完成這次的課程目標了！
歡迎來到 Vue 系列的第三份課程 在這次的系列課程中，我們要開始學習大名鼎鼎的「元件」觀念了 在之前的課程中，雖然我們成功做出了多個好用的應用程式 但在實務上，更大型的應用程式，需要將一些部分寫成「可以重複使用」的元件，團隊合作才方便 軟體圈有一句名言是這樣說的：「要寫出大型應用程式的訣竅，就是不要寫大型程式。寫出很多個小的程式，然後組合起來使用。」 聽起來很酷吧？寫元件的確還滿酷的！ --- 有件事我需要再次強調 Vue 框架中，同樣一個問題，有很多種解決方法 甚至同一種解決方法，又有很多種寫法、語法可以使用 所以你在讀文件、在各種論壇看大家範例程式碼的時候，鐵定會有一種困惑：怎麼跟我的寫法不一樣？ 我要再次強調：這些通通都不重要！能解決問題就好！ 就像拿到一個超大盒工具箱，附贈有一本厚厚的說明書 你完全不需要把整本工具書讀熟、箱內的所有工具都摸熟 你只要視情況隨便拿幾個你會用、覺得好用的工具就可以了 有些工具就讓它永遠待在箱子內就好，不要勉強自己去使用它們 --- 話不多說，讓我們馬上開始來寫 Vue 元件吧！
**🚨🚨注：**本文分享的所有tips、tricks都是GitHub repository[【css tips tricks】](https://github.com/devsyedmohsin/css-tips-tricks)的一部分。覺得有用的話請查看資源庫並給它一個star🌟 原文出處：https://dev.to/devsyedmohsin/22-useful-css-tips-and-tricks-every-developer-should-know-13c6 ## 1. Docs Layout 僅用兩行 CSS 建立響應式文件樣式的佈局。 ``` .parent{ display: grid; grid-template-columns: minmax(150px, 25%) 1fr; } ```  ## 2.自定義游標 查看 github 存儲庫 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks) 以了解更多訊息。 ``` html{ cursor:url('no.png'), auto; } ```  ## 3. 用圖片填充文本 ``` h1{ background-image: url('images/flower.jpg'); background-clip: text; color: transparent; background-color: white; } ```  **注意：** 在使用此技術時始終指定 `background-color`，因為這將用作後備值，以防圖像因某種原因無法加載。 ## 4. 給文本加入描邊 使用 text-stroke 屬性使文本更易讀和可見，它會向文本加入筆劃或輪廓。 ``` /* 🎨 Apply a 5px wide crimson text stroke to h1 elements */ h1 { -webkit-text-stroke: 5px crimson; text-stroke: 5px crimson; } ```  ## 5.暫停 Pseudo Class 使用 `:paused` 選擇器在暫停狀態下設置媒體元素的樣式 同樣 `:paused` 我們也有 `:playing`。 ``` /* 📢 currently, only supported in Safari */ video:paused { opacity: 0.6; } ```  ## 6.強調文字 使用 text-emphasis 屬性將強調標記應用於文本元素。您可以指定任何字串，包括表情符號作為其值。 ``` h1 { text-emphasis: "⏰"; } ```  ## 7.樣式首字下沉 避免不必要的 `<span>`，而是使用偽元素來為您的內容設置樣式，就像 `first-letter` 偽元素一樣，我們也有 `first-line` 偽元素。 ``` h1::first-letter{ font-size: 2rem; color:#ff8A00; } ```  ## 8.變數的回退值 ``` /* 🎨 crimson color will be applied as var(--black) is not defined */ :root { --orange: orange; --coral: coral; } h1 { color: var(--black, crimson); } ```  ## 9. 改變書寫模式 您可以使用書寫模式屬性來指定文本在您的網站上的佈局方式，即垂直或水平。 ``` <h1>Cakes & Bakes</h1> ``` ``` /* 💡 specifies the text layout direction to sideways-lr */ h1 { writing-mode: sideways-lr; } ```  ## 10.彩虹動畫 為元素建立連續循環的彩色動畫以吸引用戶注意力。閱讀 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks#rainbow-animation) 存儲庫以了解何時使用“prefer-reduced-motion”媒體功能 ``` button{ animation: rainbow-animation 200ms linear infinite; } @keyframes rainbow-animation { to{ filter: hue-rotate(0deg); } from{ filter: hue-rotate(360deg); } } ```  ## 11.掌握Web開發 訂閱我們的 [YouTube 頻道](https://www.youtube.com/@nisarhassan12)，讓您的網絡開發技能更上一層樓。 [最近的視頻系列](https://www.youtube.com/watch?v=1nchVfpMGSg&list=PLwJBGAxcH7GzdavgKlCACbESzr-40lw3L) 之一介紹了建立以下開源[投資組合模板](https://github.com/nisarhassan12 /投資組合模板）。  ## 12. 懸停時縮放 ``` /* 📷 Define the height and width of the image container & hide overflow */ .img-container { height: 250px; width: 250px; overflow: hidden; } /* 🖼️ Make the image inside the container fill the container */ .img-container img { height: 100%; width: 100%; object-fit: cover; transition: transform 200m ease-in; } img:hover{ transform: scale(1.2); } ```  ## 13.屬性選擇器 使用屬性選擇器根據屬性選擇 HTML 元素。 ``` <a href="">HTML</a> <a>CSS</a> <a href="">JavaScript</a> ``` ``` /* 🔗 targets all a elements that have a href attribute */ a[href] { color: crimson; } ```  ## 14. 裁剪元素 使用 `clip-path` 屬性建立有趣的視覺效果，例如將元素剪裁成三角形或六邊形等自定義形狀。 ``` div { height: 150px; width: 150px; background-color: crimson; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } ```  ## 15.檢測屬性支持 使用 CSS `@support 規則` 直接在您的 CSS 中檢測對 CSS 特性的支持。查看 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks#check-if-property-is-supported) 存儲庫以了解有關功能查詢的更多訊息。 ``` @supports (accent-color: #74992e) { /* code that will run if the property is supported */ blockquote { color: crimson; } } ```  ## 16. CSS 嵌套 CSS 工作組一直在研究如何向 CSS 加入嵌套。通過嵌套，您將能夠編寫更直觀、更有條理和更高效的 CSS。 ``` <header class="header"> <p class="text">Lorem ipsum, dolor</p> </header> ``` ``` /* 🎉 You can try CSS nesting now in Safari Technology Preview*/ .header{ background-color: salmon; .text{ font-size: 18px; } } ``` ## 17.箝制函數 使用 `clamp()` 函數實現響應式和流暢的排版。 ``` /* Syntax: clamp(minimum, preferred, maximum) */ h1{ font-size: clamp(2.25rem,6vw,4rem); } ```  ## 18. 樣式化可選字段 你可以使用 `:optional` 偽類來設置表單字段的樣式，例如 input、select 和 textarea，這些字段沒有 required 屬性。 ``` /* Selects all optional form fields on the page */ *:optional{ background-color: green; } ``` ## 19. 字間距屬性 使用 `word-spacing` 屬性指定單詞之間的空格長度。 ``` p { word-spacing: 1.245rem; } ``` ## 20. 建立漸變陰影 這就是您如何建立漸變陰影以獲得獨特的用戶體驗。 ``` :root{ --gradient: linear-gradient(to bottom right, crimson, coral); } div { height: 200px; width: 200px; background-image: var(--gradient); border-radius: 1rem; position: relative; } div::after { content: ""; position: absolute; inset: 0; background-image: var(--gradient); border-radius: inherit; filter: blur(25px) brightness(1.5); transform: translateY(15%) scale(0.95); z-index: -1; } ```  ## 21. 改變標題位置 使用 `caption-side` 屬性將表格標題（表格標題）放置在表格的指定一側。  ## 22. 建立文本列 使用列屬性為文本元素製作漂亮的列佈局。 ``` /* 🏛️ divide the content of the "p" element into 3 columns */ p{ column-count: 3; column-gap: 4.45rem; column-rule: 2px dotted crimson; } ```  --- 以上分享，希望對您有幫助！
## 題目說明  寫出這樣子的網頁切版 ### 示範效果  CODEPEN:https://codepen.io/flwrtykd-the-scripter/pen/VwGyOwa ## 代碼寫法 ### HTML ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>貓咪網站</title> </head> <body> <div class="wrap"> <div class="hero"> <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" alt="" /> <div class="text"> <span class="red">有貓咪也有狗，</span> <br /> <span class="red">甚至是螳螂！</span> <br /> <span class="green">隨便讓你領養</span> </div> </div> <div class="content"> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> </div> <div class="footer"> <p>@copy right 這邊就是一些文字</p> </div> </div> </body> </html> ``` ### CSS ``` body { background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80"); overflow: hidden; } .wrap { width: 1000px; background-color: #e9edc9; margin: 0 auto; height: 100vh; margin-top: -10px; } .hero img { width: 100%; height: 250px; object-fit: cover; object-position: 0px 1px; } .hero span { font-size: 45px; } .hero .green { font-size: 35px; } .text { position: absolute; top: 35px; left: 250px; font-weight: 900; text-shadow: 2px 2px 5px white; border-left: 5px solid yellow; } .text > * { margin-left: 20px; } .content { display: flex; justify-content: space-around; margin-top: 40px; } .block { width: 250px; border: 1px solid black; } .block img { width: 100%; } .block p { padding: 5px 20px; } .block:nth-child(1) { margin-left: 25px; } .footer { background-color: black; color: white; text-align: center; height: 30px; } .footer p { transform: translateY(25%); } ``` ## 布局解釋 ### 背景以及格局 先設定一個背景 background img之後 使用wrap來製造一個效果是左右縮窄 只要設定width 以及margin auto 0就可以了 之後我使用三個分區 分別是上到下的四個div: hero 裡面有大圖片 text是標題文字 然後是content裡面放置三個block裝著小圖片跟內容文字 最底下是footer放著版權說明 ### hero & text hero就放圖片 width設定100%即可 text的話我裡面用三個span寫文字 設定class分別調整樣式 換行是使用br標籤 其中左邊的書籤效果(黃色長長那條) 是對text這個div使用border left完成的 ### content 這邊的話 先對content的div設定display flex達到水平排列的效果 其中可以用justify content讓它space around 平均分散開 再使用:nth-child(1) 去針對第一個block調整margin left 讓排版更精準 裡面的話 寫一個block 完成後再複製成三個 block放置img跟p即可 而它本身也要用一個border製造出邊線的效果 ### footer 我使用 transform: translateY(25%); 讓文字有點垂直置中的感覺 這都可以自己微調 ## 特別注意 在hero的img調整上我使用了 object-fit object-position 這兩個屬性去微調 這個是很好用的小技巧，可以特別留意 ## 心得 這種切板很常見 使用的伎倆其實差不多就那些 學習上 可以藉由先完成效果 再尋求優化的原則 以上 有相關問題都可以提出討論 或是歡迎投稿想要切版的圖片 我未來可以寫一系列的切版文來跟大家交流～～～
經營這網站主要是想做新手友善論壇 本想隨手寫2-3份入門教材，簡單給新手一些方向 結果居然寫了8份，而且我發現後面還有滿多要教的東西 所以我打算把自學教材改成「付費教材」，我乾脆長期研發新教材好了 - JavaScript 系列前兩課免費 - 每個系列售價$199 - 現有會員不受影響（今天之前註冊的會員，所有教材維持免費） 以上規劃跟大家分享，希望中長期來說，可以變成最優質、最便宜的前端系列教材 然後就可以跟討論區功能相輔相成，讓新手有個持續進修的好地方
* [第1課 ── 碼表應用程式](https://replit.com/@birdiewu/Ma-Biao-Ying-Yong-Cheng-Shi-online-stopwatch?v=1) * [第2課 ── 筆記應用程式](https://replit.com/@birdiewu/Bi-Ji-Ying-Yong-Cheng-Shi-online-notepad?v=1) * [第3課 ── 分帳應用程式](https://replit.com/@birdiewu/Fen-Zhang-Ying-Yong-Cheng-Shi-online-split-the-bill?v=1) * [第4課 ── 行事曆應用程式](https://replit.com/@birdiewu/Xing-Shi-Li-Ying-Yong-Cheng-Shi-online-calendar?v=1) * [第5課 ── 體重追蹤應用程式](https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1) 備註：如果第五課卡關，說不定你遇到跟我一樣的問題，可以參考[這裡的討論串](https://codelove.tw/@birdie2019/post/Ja69K3) * [第6課 ── 天氣查詢應用程式](https://replit.com/@birdiewu/Tian-Qi-Cha-Xun-Ying-Yong-Cheng-Shi-weather-in-taiwan?v=1) * [第7課 ── 國家資訊與地圖應用程式](https://replit.com/@birdiewu/Guo-Jia-Zi-Xun-Yu-Di-Tu-Ying-Yong-Cheng-Shi-world-map?v=1) 心得分享： JavaScript第八系列的作業跟前七個系列相比真的有挑戰性和困難度，此系列讓我進入到學習的陣痛期，不習慣、沒自信地摸索著，在網路上東看看西看看方法，文件重複看了好多次，code也拼拼湊湊完成每個作業的規格，遇到卡關的問題學著自己解決(除了第五課的問題外，那邊卡關兩天，最後終於揮白旗XD)，想想有什麼辦法可以做或可以找哪方面的資料，我認為自己不是很聰明和邏輯好的人，剛開始覺得作業規格條件好困難，一直出現卡關的問題，現在回頭看其實我都挑戰完成了欸！雖然回去翻作業看還是有小瑕疵和待優化的地方，但還是恭喜自己終於完成了! _(:з」∠)_
https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1  JS部分加上第46~49和55~58行無法更新圖表(官網提供的功能) 新增和刪除資料時，圖表無法跟著一起改變，只能重新整理網頁才會改變 不知道哪邊出了問題＠＠
https://replit.com/@evon5995/GigaDeadPort#index.html 點擊離開，把用戶跳轉到 google 首頁 點擊確認，就關閉蓋板警告 以上兩功能都完成了 但是“按過確認，重新整理之後，蓋板警告就不會再跳出來”此功能怎麼都無法完成  js的錯誤不知道如何解決
目前似乎一共有八個系列 但是標題上看不太出來是哪個系列 我認為這在學習閱讀上會導致滿大的障礙(對我來說 是否有考慮用EP幾 或是其他方法 標註是第幾個系列 否則 JavaScript 自學網頁の嬰兒教材：第2課 ── XXXXXXXXXXXXXXXXXX 這種第二課可能會有八篇 必須我自己藉由XXXX的文字內容去猜到底是哪個階段的話 還滿煩躁的 個人想法是 「JavaScript 自學網頁の嬰兒教材」這幾個字似乎也稍微過於冗長、重複太多次 也許可以找個縮寫名稱 或是乾脆省略(? 畢竟這應該也不是SEO重點(? 也希望其他學員發表想法 大家討論看看~ 也許只是我個人的小偏見~提供參考而已:))))
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
