南二組 | 2023 切版班

@south2

Public team

Joined on Jul 8, 2023

  • 多出來的空間 「貼心的瀏覽器」預設會幫圖片下方加一點距離,導致多出來的不明空白 怎麼解決 HTML img 下方有不明空隙?! 解法一 解法一是可以將 vertical-align 的設定修改為 top/bottom/text-top/text-bottom 改變與父元素的對齊基準。 img {
     Like  Bookmark
  •  Like  Bookmark
  • :::spoiler 目錄 ::: :::success 【題目連結】 【檢核】 [ ] 參與人數: 人
     Like  Bookmark
  • :::spoiler 目錄 ::: :::success 【題目連結】 ::: 參與人員
     Like  Bookmark
  • AOS Github Repo AOS Demo 頁面 引入方法 1. CDN 引入 在 head 加上樣式: <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> 在 body 結尾標籤加上 script:
     Like  Bookmark
  • 第一週重點整理 環境建立 容器概念 開發人員工具 HTML標籤 CSS Reset 元素寬高 img的神奇空白 內容寬度
     Like 1 Bookmark
  • :::spoiler 目錄 ::: :::success 【題目連結】 ::: 參與人員
     Like  Bookmark
  • :::warning 【來源】 https://discord.com/channels/801807326054055996/1141250096785268778/1141250096785268778 ::: :::info 主要著重於如何修改 Bootstrap 來做客製化的樣式
     Like  Bookmark
  • CDN 如果要客製化,就不能使用 CDN npm
     Like  Bookmark
  • :::spoiler 目錄 ::: :::success 【題目連結】 ::: 參與人員
     Like  Bookmark
  • :::info 第五週設計稿: https://xd.adobe.com/view/ea9c3e28-6d25-42cb-b6a5-1571c1707f05-bfcf/ 切版直播班-W5-dashboard-ver2 11 Screens, Last modified on Aug 02, 2023 02:02 GMT 圖片 Bootstrap 文件: https://bootstrap5.hexschool.com/ :::
     Like  Bookmark
  • 簡介連結 CDN 引入 CSS <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> JS <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> 初學者範本
     Like  Bookmark
  • 官網 英文版 中文版 Icons 可以下載 svg 版本 icon font <i class="bi bi-0-circle"></i> 可以透過改變字體顏色來改變 icon 顏色 為獨立套件,不需要載入 Bootstrap
     Like  Bookmark
  • :::spoiler 目錄 ::: :::success 【題目連結】 ::: 參與人員
     Like  Bookmark
  • :::info 【來源】 https://discord.com/channels/801807326054055996/1136176662388670635/1136176662388670635 ::: :::info 第四週設計稿(第三週設計稿改為多頁式): [W3 - 眼鏡官網.v3 (adobe.com)](https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/specs/ "W3 - 眼鏡官網.v3 (adobe.com) (https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/specs/)")
     Like  Bookmark
  • :::spoiler 目錄 ::: :::success 【題目連結】 【檢核】 [x] 參與人數: 8人
     Like  Bookmark
  • 常見共同區塊 常見的共同區塊,例如header、footer..等,他們在好幾個頁面上都有出現。 以往的作法會透過「複製貼上」的方式來做,很麻煩、不好改,且容易出錯。使用 ejs (內嵌式的樣板引擎) 來引入重複的區塊。 語法: <%- include() -%> 什麼是 Vite package.json 專案有使用哪些套件都記錄在 package.json,下 npm install 來下載這些套件。
     Like  Bookmark
  • 第三週主線任務連結
     Like  Bookmark
  • 第二週主線任務連結
     Like  Bookmark
  • 第一週主線任務連結
     Like  Bookmark