情境 今天我們來討論一個卡片容器的例子: 當內容在一般裝況下,我們不會需要滾動條,但是當內容長度過多時,我們會需要滾動調,讓我們在不改變卡片容器大小的狀況下,...
Day 13 - 切版排版技巧(一) : Flex排版、Box模型 每日一談 嗨,大家好 ! 我是阿蘇今天是Day13 ,我們前面分享了HTML / CSS...
設定 display: flex; 以後,其下的 子元素 會 橫向排列 。 實作並介紹 justify-content 屬性(flex 元素與主軸對齊),值包...
接續Day 20,繼續來講解沒完成的JS部分 專案回顧 畫面和功能拆解 畫面中的密碼生成器裡內有標題 > 結果顯示欄 +複製按鈕 > 需求設定...
資產負債表 表格元素 <table> HTML自帶製作表格或報表專用的標籤,這裡簡單介紹table中標籤代表的意思: <table>...
float浮動屬性,通常會用在文繞圖的場景上,而常見值有:none / left / right 宣告的方式: wrapper{ float:left;...
人與人之間都是具有彈性的,好人就會被凹一下(='X'=),同事:「诶你用完囉,今天進度幫我一下好不好~」今天我們來實作Day #18 Elastic Code...
我們這次主要會依靠2個偽元素 :before & :after還有animation來完成這次的動畫:before 作為我們Box主體, :after...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是雙莓閃電泡芙 這次的元素比較複雜,架構也相對多一些,Html結構如下: .eclair .main/*泡芙*/...
Day 12 - 切版基礎打底(二) : 必學CSS運用 每日一談 嗨,大家好 ! 我是阿蘇今天是Day12,我們一樣繼續談談CSS的實作運用,有哪些是必學、...
一、前言 其實,我也不知道自己怎麼會想加入這個主題,只是有點想要學習 Vim 的基本操作,順便紀錄一下學過的操作方法,現階段我也沒有想要背任何的指令或是快捷鍵...
組件實作 : Demo 一、前言 Tab 組件是一種高互動性的組件,構造是由一個 Menu 選單和一個訊息框組合而成,當選單項目被選中時,會切換到對應的訊...
前言 進入CSS講了這麼多選擇器,終於來到文字的設計啦! 之前在學校做報告時候,常常會使用文件裡面編輯文字,可能這個字體要更改成微軟正黑體,又或是字體的大小需要...
情境 我們先前也提到一些圖片處理的相關防禦性 CSS,例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候,防止圖片的比例變...
實作 判斷預設 的 display 屬性(block 或 inline),並更改標籤的 display 屬性(inline-block 和 none)。...
position 在CSS裡面是一個很重要的排版屬性,比如我們希望某個元素固定在畫面上的話,就可以使用position fixed。 position:fixe...
情況: 實作列印功能時,資料有多筆,右鍵列印要把每一筆都印在不同頁 解法: 在每一筆想要獨立列印的部份加上 css page-break-after: alwa...
今天我們來實作Day #17,潘洛斯三角形為存在於二維空間的三角形,而在現實世界中不可能存在的物體。 潘洛斯三角維基百科 Penrose Triangle...
這篇沒有帥哥可以看,不過也是一個非常有趣的projecto( ̄▽ ̄)d 今天要做的是密碼生成器,根據使用者的需求去自動生成密碼,聽起來很厲害,另外考量到這篇的J...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是草莓餡愛心餅乾 餅乾主要分成3個部份,餅乾體、愛心果醬及果醬厚度Html結構如下: .cookie .mai...
Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎 每日一談 嗨,大家好 ! 我是阿蘇今天是Day 11,不知不覺終於突破 Day10 啦 !...
今天要來介紹最後的動畫效果 Animation Transition、Transform為轉場動畫如果希望載入頁面後直接開始動畫,就可以來使用 Animatio...
組件實作 : Demo 一、前言 網頁上要顯示店家、場地等地理位置資訊,都會使用到 Google 地圖來輔助。在這個篇章中,我們要來研究關於 Google...
前言 挑戰快要到一半了!! 剛完成讓人頭昏眼花的選擇器學習,那選擇器在套用的順序上面也是有優先順序的 本篇就是一個補充說明,講一下CSS Rules 幾個規則,...
組件實作 : Demo 一、前言 Modal 指的是互動視窗,也就是讓畫面跳出一個蓋板訊息框。使用 Modal 背景大多由半透明黑色覆蓋;訊息框(互動視窗...
[情境任務] 解師傅:太好了,菜單該有的功能都有了,這麼一來就萬無一失了! 小當家:恩…萬事俱備,只欠東風 解師傅:欸?…還需要什麼東風? 小當家:我一直很想說...
情境 圖片和文字通常是相輔相成的存在。現代的網頁上面有許多的圖片,一方面是為了讓畫面看起來更多元、豐富,另一方面,圖片也能夠幫助瀏覽者一眼看出作者想要表達的內容...
box model margin 外距 : 元素 & 元素 之間的距離border 邊框 : 存在於 外距 & 內距 之間padding 內...
今天要來做的是垂直的輪播圖,點選「上」「下」箭頭可以反方向切換圖片和圖片的描述,做project順便看看帥哥好快樂≡ω≡ 事前準備 引入 fontAwes...
Transform 變形 主要是讓目標元素變形,可以旋轉、歪斜、放大、縮小、移動元素有分成2D以及3D的部分,先來介紹 2D transform transf...