我們已經了解到基本的切版概念了，但前面所學的都是固定在網頁上，也就是之前所說正常的文檔流！而這一篇就要來學會更進階一點了佈局方法了，讓元素布局上更加奔放自由，...
為什麼會有個「偽」字呢？ 偽（Pseudo）這個意思有虛幻虛無的意思，類選擇器是用來處理 DOM 操作不了選擇器，偽元素則是原本並沒有在 HTML DOM 中...
這篇文章簡單介紹一下Sass~ Sass 是什麼 ? Sass是一種CSS預處理器語言(CSS preprocessor)，可以讓開發者使用像是變數、函式、嵌套...
CSS Fonts(字體) 屬性用於定義字體系列、大小、粗細 和文字樣式(ex:斜體) 1.字體系列font-family 屬性定義文本的字體系列 <st...
單元對齊跟留白的部分今天會繼續，定位的問題基本上不出亂子的話就如同昨天說明的。當然，如果再加上對齊跟留白，如果不小心也是會爆炸的。 對於留白問題，我一律設定為...
Q: 是不是來點icon比較知道這是幹嘛的？A: 不複雜的可以用css畫，複雜的可以考慮出圖或是svg！ 繼上一篇已經做出一個置底的彈出式選單，但看著總覺得...
工程師都有google的習慣，但是 bootstrap 的使用方式不用特別去估狗，基本的用法只要看官網的介紹就可以了。若發現自己看不懂文件，多半都是自己還沒有補...
網站必備！連結動態 連結的Hover動態算是網頁動態最基本款，一個好的動態絕對可以幫網頁 點擊率（CTR） 加分。 (話說當時菜鳥的我根本不知道什麼是hover...
今天要來安裝這次會用到的所有工具套件，並能順利將SASS編譯成CSS~ VS Code 套件 我們這次需要使用到Live Server，可以到VS Code的延...
要來介紹大家最愛用的 Flexbox 了，以往兼容性還不太好的時候，大多都是使用表格（table）屬性來進行排版，也容易出問題，現在科技進步迅速，瀏覽器也持續...
CSS的選擇器分為基礎選擇器以及複合選擇器本日將將繼續說明複合選擇器 複合選擇器可以更準確更高效的選擇元素(標籤) 是由兩個或多個基礎選擇器透過不同方式組合而...
Q: 這個看起來像貓爪的東西是什麼？A: 喵？ 本篇開始將實作選單的微動畫，比較特別的要來說說transform的順序帶給動態效果的影響！ 謎音1：本次示...
CSS的選擇器分為基礎選擇器以及複合選擇器本日將先說明基礎選擇器 DAY6將繼續說明複合選擇器 CSS中的基礎選擇器單個選擇器組成，包含標籤選擇器、類選擇器、i...
今天繼續來講 Grid 單元，昨天提到了對齊基本用法，今天繼續來講對齊與留白。不過一開始，還是先解釋清楚關於格線與單元之間的事情。 總覺得 15 天就會結束了說...
現在終於可以開始講 Grid 單元的事情了，雖然可以講的事情可能不多，絕大部分會圍繞在造成容器影響的地方，當然基本的東西還是會先帶一下。 只是說講完之後到底能不...
如同前面章節所說，一開始的標籤元素，很單調只有一行並沒有各式各樣的元素，是瀏覽器內建的樣式表賦予它該展示的樣子。 圖中，瀏覽器為 <table>...
Q: 請問icon要怎麼出圖好呢？A: 一定要用圖片嗎？ 本篇要實作的是「加到最愛」的按鈕，結合之前所述的偽元素，以不使用圖片的方式做出圖案，讓按鈕可以有更...
了解盒模型後，就要為標籤套上各種花樣了，上一篇介紹了簡單的套用方法，但這個套用方法其實不太好用！ 使用標籤元素套用就像是畫草圖上底色，雖然有色彩但不細緻，這時...
Q: 想要電腦上的開關按鈕看起來跟App上的一樣，可以嗎？A: 想要什麼顏色的呢？ 介紹完transition後，接下來這篇的實作案例會運用比較基礎的js針...
人是視覺動物 當網頁架構用得差不多了，想自己安排布局，會開始想辦法把網頁變得更漂亮。Google Chrome 很好用，有提供開發者工具給我們除錯，點開 el...
來到了 30 天的三分之一，然後我才剛講完網格容器而已，但是，剩下的東西也不多了，好像要寫滿 30 篇難度有點高。 只好多寫一點廢話了。 間隔、間隔、間隔...
Q: 別人網站上看到的動態效果變化很多，還是引寫好的套件(庫)進專案吧？A: 只引進一個套件(庫)就可以滿足你的需求嗎？還是要引進很多個？ 偽元素也是製作「...
你以為網格格線告一個段落後，我會開始講網格單元嗎？當然不是啊，我們網格容器都還沒講完呢。剩下一點小東西稍微交代一下就可以了。 放心雷沒有很多。 容器中的隱性軌...
請問你只會<br /> 跟&nbsp; 嗎 ? 如果你只會這些的話，這篇會對你的幫助很大 後端寫樣式，要有後端的樣子。我們雖然沒辦法像前端那...
Q: 網路上找到的看起來都很厲害，程度能比嗎？A: 厲害歸厲害，每個效果都適合你的網站嗎？ 讓元素對使用者的操作有「回應」可以讓使用者有跟網頁「互動」的感覺...
前言： 昨天的進度中，我們大致完成了一個由HTML建構起來的網站，只是看起來真的是太陽春了。今天我們就透過CSS來加上一些會動又好看的特效吧！ 我CSS有龍炮...
前言： 就像吃藥一定要配溫開水一樣，html一定要配CSS！ (貼心提醒：有些藥如果配溫開水其實是會造成反效果的！可以點進下方報導看一下~ https://t...
我先問一個問題，如果我有一個 3x3 的 Excel 方塊，請問我有幾條格線？ Grid 容器中的格線是整個排版定位中的靈魂，但，他沒有 Excel 那麼單...
我們繼續來深入關於 Grid 容器的相關樣式設定。雖然目前 CSS 框架在多數情況下並不需要特別在意，但，就老話一句，誰在意誰痛苦。 踩到雷而且你還不知道為什...
Q: 為什麼別人的按鈕點起來比較有感覺？ A: 因為外國的月亮比較圓？ 網頁中常常會有很多可以點擊的地方（按鈕或是超連結），有些網站的按鈕讓人覺得「只是按鈕...
Mao
zhix6842
a0265392_lin
閃光洽
L
漢漢老師
Global Rachel
Cooksuhr
iThome鐵人賽
看影片追技術