Search
相對於 Bootstrap 4 來說，我認為 v5 真正發揮特色的地方在於 “變數”
雖然 Sass 可以透過簡短的語法產生大量的 CSS 程式碼，但這也意味著 CSS 檔案會不斷地擴增。因此許多設計概念在 v4 都受到了限制，例如：不同間距的 gutter（v4 只有三種，而這三種已經讓 Bootstrap 額外佔用許多容量）。
到了 v5 以後，除了原有的 Sass 之外，更靈活運用原生的 CSS 變數技巧，這些用法甚至會讓人感覺到「哇～原來變數可以這樣玩」。以格線系統來說，每次新增一種新的 gutter 僅需要增加 3 行 CSS（沒錯，包含 ClassName 就三行；至多不需要超過 5 行）
傳統的 CSS，至少要 60 行以上才能達到此效果，而 CSS 變數的 3 行影響到：
- 12 欄
- 5 種中斷點的欄線
- 外層 .row 的設計
更詳細的 CSS 變數知識
可參考此篇文章：https://wcc723.github.io/development/2021/09/22/css-variables-bootstrap/
六角學院
最近趁零碎的時間，到六角學院線上學習網頁設計程式課程。
對於部落客來說，從寫文章到整個部落格的頁面都會碰到程式碼，從寫文章到整個部落格的版面都用的到!在還沒有上課之前，面對一堆看不太懂得程式碼，覺得眼睛很花!26個英文字母我認得出來，湊在一起就覺得好陌生😭
每次看到格友內文字多了特別的框線或是版型，需要厚著臉皮不恥下問，問到人家覺得有點煩了，才可能會問到想要的答案!🙋♀️🙋♀️🙋♀️
這一次感謝六角學院提供很扎實的三小時體驗課程，同學購買的話課程時數會更多更扎實
透過網頁設計程式課程裡面從最基本的下載VS Code開始教學，到 #HTML #CSS 來做修改，每一個段落還有作業可以作答，透過作業可以了解自己對課程吸收了多少
每一份作業提交後助教都會針對一些細節提供建議，條列式陳述出程式碼內需要修改的地方。像是HTML 標籤修改、不需每行都使用一個 p 標籤…等，每一項都寫得非常清楚，讓學員透過作業修改就可以馬上知道哪裡需要修正，有不懂得還可以做詢問
到對於想要嘗試往前端工程師邁進的來說，透過約三小時的課程，讓自己可以了解更前端的基礎知識，課程中有不懂的也可以透過 #slack 的即時頻道發起討論，裡面有許多學長姐、助教可以幫忙解答，也可以透過「學員發問規範」來詢問講師!完成任務還可以獲得證書唷!
透過六角學院線上課程，讓我在零碎的5~10分鐘也可以學習關於HTML 基礎教學、CSS 常用語法、使用 CSS 變更 HTML 標籤特性。
之後就可以把部落格的版面改漂亮一點了~如果是想要學習前端程式，0基礎想要嘗試看看的朋友都很推薦唷~
📍六角學院官網連結:
https://hexschool.tw/829CSS
📍六角Facebook粉絲專頁連結: https://www.facebook.com/hexschool
📍六角學院Instagram連結: https://www.instagram.com/hexschool/?igshid=dm5uf17s2sma
#六角學院 #前端 #網頁設計課程 #切版 #網頁設計 #設計師必備 #新手 #新鮮人 #學習 #前端 #uiux #線上課程 #線上教學 #新手設計師 #網頁切版 #vscode #程式碼
【Blog改善工程終於完成】
近年在香港都出現很多古怪的字眼,
明明就是「改善」硬就是要用「優化」,
在台灣也出現了什麼「校正回歸」,
明明用「新增修訂」「補充案例」就可以了,
古古怪怪的。
這陣子不只台灣讀者因為疫情Lockdown而悶氣,
我在香港每個月著不同的朋友離開,
更是令人覺得失落沮喪, 有種愁緒彌漫,
因此須要找些工作可以讓自己一頭栽下去,
不到完成不會休息的事情,
終於決心, 把我有1300多篇遊記的Blog,
把主題, 版面, 用色等等全部大修改!!!!!
我是個IT白痴, 但又是個瘋子，
花了整整4整日時間(對, 幾乎不眠不休),
將自己3個網站全部進行大改造,
我又比較貔貅, 都用Free Theme,
而這些免費東西做到自己想要的效果,
的確須時甚久, 又要找不同的plugin幫手,
甚至改css, 只希望讀者們有更好的感覺!
至少, 排版應該比較有現代感吧? 哈！
請大家也給我一些意見, 慢慢改進!
Web Site在下面留言才貼上,
否則觸及率會被壓低得好恐怖!
---------------------------------------------------
~ Adesso e Futuro ~
by Sharpe Law since 2008
喜歡寫文章, 喜歡意大利, 喜歡旅遊, 喜歡皮革
元智_雲端應用與APP設計第13次上課
01_重點回顧與自訂ICON
02_更新為jquery_mobile145版本
03_下載ICON與設定CSS並修改data_icon設定
04_設定CSS與修改網頁並上傳PHOTOGAP
05_解決145佈景主題無法顯示問題與期末作業
完整教學：
https://www.youtube.com/playlist?list=PLYDN7SApJ3Phq5mM5zOOOGXp90tmfp6aR
課程簡介
了解工業4.0裡的新雲端應用
以GOOGLE雲端應用為例
GOOGLE地圖、相簿、雲端硬碟
革新代表新機會—YOUTUBER
如何下載YOUTUBE影片與快速剪輯影片與安裝解碼器
如何批次轉換與建立影片播放清單
如何使用雲端剪輯工具 (篩選器、音訊、附註、字幕)
文史APP應用與設計
元智大學,中語系,雲端應用與APP設計,吳老師,線上教學,GOOGLE表單設計,短網址,QRcode,GOOLGE雲端應用經驗分享,YOUTUBER&下載,YOUTUBE影片
元智_雲端應用與APP設計第13次上課
01_重點回顧與自訂ICON
02_更新為jquery_mobile145版本
03_下載ICON與設定CSS並修改data_icon設定
04_設定CSS與修改網頁並上傳PHOTOGAP
05_解決145佈景主題無法顯示問題與期末作業
完整教學：
https://www.youtube.com/playlist?list=PLYDN7SApJ3Phq5mM5zOOOGXp90tmfp6aR
課程簡介
了解工業4.0裡的新雲端應用
以GOOGLE雲端應用為例
GOOGLE地圖、相簿、雲端硬碟
革新代表新機會—YOUTUBER
如何下載YOUTUBE影片與快速剪輯影片與安裝解碼器
如何批次轉換與建立影片播放清單
如何使用雲端剪輯工具 (篩選器、音訊、附註、字幕)
文史APP應用與設計
元智大學,中語系,雲端應用與APP設計,吳老師,線上教學,GOOGLE表單設計,短網址,QRcode,GOOLGE雲端應用經驗分享,YOUTUBER&下載,YOUTUBE影片
元智_雲端應用與APP設計第13次上課
01_重點回顧與自訂ICON
02_更新為jquery_mobile145版本
03_下載ICON與設定CSS並修改data_icon設定
04_設定CSS與修改網頁並上傳PHOTOGAP
05_解決145佈景主題無法顯示問題與期末作業
完整教學：
https://www.youtube.com/playlist?list=PLYDN7SApJ3Phq5mM5zOOOGXp90tmfp6aR
課程簡介
了解工業4.0裡的新雲端應用
以GOOGLE雲端應用為例
GOOGLE地圖、相簿、雲端硬碟
革新代表新機會—YOUTUBER
如何下載YOUTUBE影片與快速剪輯影片與安裝解碼器
如何批次轉換與建立影片播放清單
如何使用雲端剪輯工具 (篩選器、音訊、附註、字幕)
文史APP應用與設計
元智大學,中語系,雲端應用與APP設計,吳老師,線上教學,GOOGLE表單設計,短網址,QRcode,GOOLGE雲端應用經驗分享,YOUTUBER&下載,YOUTUBE影片
在修改CSS樣式的起手式不外乎常用的應該就是下列兩種方式: document.getElementById(id).style.property = new style; document.querySelector(classname/id/. ... <看更多>
接下來我會舉例4 種常用樣式的修改方法，適合不懂CSS 的新手學習，若你已經知道CSS 我會另外示範實用的修改CSS 技巧。 目錄[hide]. 1 修改範例: 修改 ... ... <看更多>
css 修改 在 教學| CSS 如何修改部落格版面。初學者入門篇 - Dribs & Drabs 的相關結果
這篇主要想分享，當你甚麼都不懂的時候(CSS是甚麼東西??)，該怎麼跨出修改部落格版面的第一步當然... ... <看更多>