頁尾 在這個範例中要練習頁尾的切版 整理幾個小重點如下方： 1.將footer_content設為滿版，添加背景色#f3c1c52.添加一個container，...
對話框&三角形 在這個範例中要練習對話框的接版，以及如何用css繪製出三角形 整理幾個重點: 1.將對話框dialog_box寬度設為960px，添加背...
序號項目 在這個範例中要練習序號項目的切版 整理幾個小重點如下方： 1.font-size調整文字大小，font-weight調整文字厚度，line-heigh...
價格表 在這個範例中要練習價格表切版 整理幾個重點:1.將section_price設為滿版2.container，做為固定欄寬1200px的區塊，並設定dis...
圖文版面 在這個範例中要練習圖文版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.添加一個container，做為固定欄寬1200px的區塊，...
卡片版面6 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版，添加背景色#ffc6c62.container，做為固定欄寬...
卡片版面5 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.添加一個container，做為固定欄寬1200px的區塊...
卡片版面4 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.添加一個container，做為固定欄寬1200px的區塊...
情境 Flexbox 是 CSS3 的盒子模型(box model)，顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box)，這個模型讓排版變得容...
Blue Monday again!沒事ㄉ，我們今天的進度延續前兩天的基本語法，今天來介紹boolean（布林值） 布林值是什麼概念呢？ boolean呈現方式...
情境 CSS Box Model 盒子模型是 CSS 的基礎。我們可以簡單的理解為， html 元素在 CSS 裡面，都可以視為一個一個的盒子(Box)。 如下...
昨天有介紹 Aspect Ratio 運用在 RWD 排版相當的方便 如下圖是旅遊類型的卡片 卡片排列四欄，卡片寬度會隨著螢幕寬度做變化，就很適合使用 Aspe...
繼昨天介紹了基本語法string後，我們今天打鐵趁熱，一併來看看number的部分 數字（number) Number 物件屬於數值型態，包含整數 (integ...
情境 我們在認識 CSS Box Model 的時候，有一個必須要知道的屬性，就是 box-sizing。 我們來看看這個 Box Model： 我們在初學...
感謝大家跟著小公主一同度過了鐵人賽一半的時光，希望大家可以看到小公主完賽！前半個月小公主分享的html&css都多少有上過一些課程，再來javascri...
情境 有時候我們的畫面會需要用到如下圖的 Modal 彈窗： 這樣的 Modal 彈窗，他的內容有可能是針對某個地方的額外說明，因此這個說明也有可能會需要詳細...
各位午安安！今天是friday我們按照往例，該給大家些觀念建立即可！！！ 學了一週html＋一週css我們即將邁入下一個里程碑！___JavaScript Ja...
恭喜各位跟著小公主即將邁入第三週ㄌ！！！（撒花撒花）在第二週最後一天（應該也是css的最後一天？！）小公主滿心歡喜上網查找有什麼酷東西可以學習和分享給大家，赫...
情境 當我們內容超出頁面的時候，我們會設置滾動條。上個單元中，我們介紹了使用 auto 來設置，避免不需要的時候還出現滾動條： .card { overfl...
本日先進行 component 內的 props初探，了解 component 如何與外面的資料進行互動，使每個物件都可以順利的把資料傳入作用。 建立第一版 c...
今天是教師節！祝天下所有老師教師節快樂！也祝所有學生可以快樂學習，終生學習 教師節是孔子誕辰，所以今天ㄉ主角就決定是孔子了！教室節學生該做什麼事情呢！就是 整！...
情境 今天我們來討論一個卡片容器的例子： 當內容在一般裝況下，我們不會需要滾動條，但是當內容長度過多時，我們會需要滾動調，讓我們在不改變卡片容器大小的狀況下，...
昨天說明了些圓角屬性，今天事不宜遲，我們來講一下陰影吧！ css常用的陰影有三種：text-shadow、box-shadow、drop-shadow顧名思義，...
情境 我們先前也提到一些圖片處理的相關防禦性 CSS，例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候，防止圖片的比例變...
css的圖檔可在邊框上做些變化使網頁更多元，今天來介紹下圓角屬性，是個設定邊框的好幫手！另外也有更酷炫的陰影效果、奇特美編等等的迷之操作，我們拭目以待？？？！！...
情境 圖片和文字通常是相輔相成的存在。現代的網頁上面有許多的圖片，一方面是為了讓畫面看起來更多元、豐富，另一方面，圖片也能夠幫助瀏覽者一眼看出作者想要表達的內容...
情境 圖片在現代網站上面所扮演的角色越來越重要。我記得有一陣子很常看見大圖片當作網站背景的設計： 或是卡片式的排版也總是會需要搭配圖片： 你能看見多遠的未來...
今天是歡樂星期天，來講個概念性的東西吧！鐵人賽也過了1/3了呢！別放棄，一起堅持下去吧！！ 覺得昨天講的相對位置和絕對位置，如果沒細講區塊的概念，會容易混亂和混...
排版好的網頁真的很重要ㄚ，那小公主今天要的是位置設定的兩種方法：絕對位置＆相對位置 大致可分為以下這些分類方式• absolute：絕對位置，當網頁往下拉時，元...
第一週手把手教學了很多基本觀念，接下來第二週要開始css的教程了！ Css主要掌控格式、美編、字體大小等等，小公主建議與html分開兩個檔案撰寫，才可更有效及清...
iThome鐵人賽
看影片追技術
看更多
ruhui0726
Taiming
icetong
indexhui
eyelash*睫毛