感謝大家跟著小公主一同度過了鐵人賽一半的時光，希望大家可以看到小公主完賽！前半個月小公主分享的html&css都多少有上過一些課程，再來javascri...
卡片版面1 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.添加一個container，做為固定欄寬1200px的區塊...
情境 我們在認識 CSS Box Model 的時候，有一個必須要知道的屬性，就是 box-sizing。 我們來看看這個 Box Model： 我們在初學...
各位午安安！今天是friday我們按照往例，該給大家些觀念建立即可！！！ 學了一週html＋一週css我們即將邁入下一個里程碑！___JavaScript Ja...
如何使用 Font Awesome 在網頁設計的同時，可以看到需要使用大量的icon，當我們網站要放入一些比較複雜的icon設計圖示，但沒有設計師幫我們產出時，...
情境 有時候我們的畫面會需要用到如下圖的 Modal 彈窗： 這樣的 Modal 彈窗，他的內容有可能是針對某個地方的額外說明，因此這個說明也有可能會需要詳細...
恭喜各位跟著小公主即將邁入第三週ㄌ！！！（撒花撒花）在第二週最後一天（應該也是css的最後一天？！）小公主滿心歡喜上網查找有什麼酷東西可以學習和分享給大家，赫...
合體版面 今天要將DAY6~DAY13所練習的所有版面合體起來，變成一個完整的頁面結束完這個完整個範例後，接下來的這幾天，每天會提供一個比較常見的範例一起練習...
情境 當我們內容超出頁面的時候，我們會設置滾動條。上個單元中，我們介紹了使用 auto 來設置，避免不需要的時候還出現滾動條： .card { overfl...
本日先進行 component 內的 props初探，了解 component 如何與外面的資料進行互動，使每個物件都可以順利的把資料傳入作用。 建立第一版 c...
今天是教師節！祝天下所有老師教師節快樂！也祝所有學生可以快樂學習，終生學習 教師節是孔子誕辰，所以今天ㄉ主角就決定是孔子了！教室節學生該做什麼事情呢！就是 整！...
導覽列 在這個範例中要練習導覽列區塊的切版 整理幾個重點:1.將section_kv設為滿版，添加屬性position: fixed (固定定位)，將導覽列的區...
情境 今天我們來討論一個卡片容器的例子： 當內容在一般裝況下，我們不會需要滾動條，但是當內容長度過多時，我們會需要滾動調，讓我們在不改變卡片容器大小的狀況下，...
昨天說明了些圓角屬性，今天事不宜遲，我們來講一下陰影吧！ css常用的陰影有三種：text-shadow、box-shadow、drop-shadow顧名思義，...
頁尾 在這個範例中要練習頁尾部分的切版 整理幾個小重點如下方： 1.將footer_content設為滿版，添加背景色#FFEBF22.添加一個containe...
情境 我們先前也提到一些圖片處理的相關防禦性 CSS，例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候，防止圖片的比例變...
css的圖檔可在邊框上做些變化使網頁更多元，今天來介紹下圓角屬性，是個設定邊框的好幫手！另外也有更酷炫的陰影效果、奇特美編等等的迷之操作，我們拭目以待？？？！！...
浮動視窗 在這個範例中要練習固定的浮動視窗，類似我們常看到的側邊廣告，位置不會隨著視窗滑動而改變 1.position: fixed 使用屬性position:...
情境 圖片和文字通常是相輔相成的存在。現代的網頁上面有許多的圖片，一方面是為了讓畫面看起來更多元、豐富，另一方面，圖片也能夠幫助瀏覽者一眼看出作者想要表達的內容...
今天是歡樂星期天，來講個概念性的東西吧！鐵人賽也過了1/3了呢！別放棄，一起堅持下去吧！！ 覺得昨天講的相對位置和絕對位置，如果沒細講區塊的概念，會容易混亂和混...
區塊卡片2 在這個範例中要練習多個卡片的排列以及游標移至卡片後的效果 整理幾個小重點如下方： 1.將section_card設為滿版2.添加一個containe...
情境 圖片在現代網站上面所扮演的角色越來越重要。我記得有一陣子很常看見大圖片當作網站背景的設計： 或是卡片式的排版也總是會需要搭配圖片： 你能看見多遠的未來...
排版好的網頁真的很重要ㄚ，那小公主今天要的是位置設定的兩種方法：絕對位置＆相對位置 大致可分為以下這些分類方式• absolute：絕對位置，當網頁往下拉時，元...
區塊卡片 今天要練習第四區塊卡片的切版 整理幾個小重點如下方： 1.將section_part2設為滿版2.添加一個container，做為固定欄寬1200px...
第一週手把手教學了很多基本觀念，接下來第二週要開始css的教程了！ Css主要掌控格式、美編、字體大小等等，小公主建議與html分開兩個檔案撰寫，才可更有效及清...
圖文版面2 今天要練習第二塊跟第三塊圖文版面的部分 整理幾個小重點如下方： 1.將section_melon以及section_gym設為滿版2.兩個部分都添加...
情境 在上一篇當中我們討論了固定高度在某些特定情境下有可能產生內溶溢出的問題。我相信我們的讀者一定也很能夠舉一反三，既然固定高度下，內容過長有可能會溢出，那換個...
鐵人賽邁入第七天，終於一個禮拜了，好感動！ 相信有了文字也有圖片，可以產出圖文並茂的網頁，不過還是少不了些格式化的基本工具，像是….表格！ 表格可以輕鬆清楚的規...
情境 不知道大家有沒有設計過官網或是活動頁的經驗呢？ 主頁橫幅(Hero Section)往往是針對網站訪問者遇到的第一視覺頁面，其目的是要提出一個該網站最重要...
結束標題後，我們可以來到網頁主視覺的部分 好的圖片，好的網頁，才能吸引消費者的興趣！人是視覺動物，第一眼給閱聽者的感官刺激決定了他會不會繼續瀏覽下去甚至按下購買...
icetong
ruhui0726
Taiming
eyelash*睫毛
iThome鐵人賽
看影片追技術