相信大家在小時候,應該多少玩過小精靈(Pac-Man)的遊戲,就是走在迷宮中吃豆子逃避幽靈,努力存活下去的遊戲。今天我們就來實作Day #21 Pac-Man...
一、前言 Gulp 是工作流程自動化的工具,可以幫我們處理一些需要重複執行的指令,像這類繁瑣的工作,可以交給 Gulp 來處理,在初學 Gulp 時,可以直接...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是珍珠鮮奶茶 珍珠鮮奶茶主要分成杯子、圓形標籤、珍珠及吸管Html結構如下: .bubbleTea .cup ....
前言 家裡每個物品都有自己的定位,所以前面講了這麼多設計框架背景等等的,接下來家具等等的要放在哪就很重要了,總不可能鍋子放房間或是枕頭棉被放廚房吧(當然這樣放真...
我們最常見到要設定一個contaner的padding時,會發現該物件會變大,所以這時候我們就可以使用一個屬性box-sizing:border-box,該物件...
Day 15 - 切版進階技巧(一) : CSS進階、CSS動畫、偽元素 每日一談 嗨,大家好 ! 我是阿蘇今天是Day15 , 不知不覺寫到了15天,不曉得...
情境 有時候我們的畫面會需要用到如下圖的 Modal 彈窗: 這樣的 Modal 彈窗,他的內容有可能是針對某個地方的額外說明,因此這個說明也有可能會需要詳細...
width 及 hight 是css裏頭做常出現的屬性,幾乎每個物件都會用到,但是身為小白的我們卻很難把他用好,導致出現跑版的狀況,為了我們小白能夠理解他們的常...
仿畢卡索畫作 任務開始出現稀奇古怪的設定,連畢卡索的畫都出來了,看的出來上面是三個人在表演樂器嗎!一起努力完成吧! 定位 (position) 在屋子中等待爺...
今天要來做的是很常見的用戶驗證介面 超白話畫面和功能拆解 當輸入一個數字後,便會自動跳到下一個輸入框 可以按backspace 按鍵去修改前面的數字 運...
組件實作 : Demo 一、前言 在寫某些專案或者是練習,時不時會看到::before、::after這類元素的用法,在第一次接觸時,總是會感到困惑,不清...
在製作個人網頁時,通常會有一個contactme(與我聯絡)的表格,這時候,我們就可以想想看怎麼美化我們的送信動畫~今天我們來實作Day #20 Send Ma...
Outline <style scoped> 的作用方式 突破 <style scoped> 的特殊選擇器a. 深層選擇器 (Dee...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是甜甜圈 甜甜圈主要分成3個部份,上層彩色糖霜、甜甜圈主體及中間洞孔Html結構如下: .donut .mid ....
組件實作 : Demo 一、前言 Animation 動畫是網頁中不可或缺的重要元素,它能夠為網頁帶來生命力,讓整個網頁「活了起來」,在本篇中介紹幾個語法...
####前言 All html elements are boxes!(with width and height) html版面就像是用一個個盒子組成的,那整...
React是前端很重要的框架之一,今天就要來介紹我們在React中要如何使用CSS來增加我們網頁的豐富度。 首先,從最簡單的改顏色開始,想必有學過CSS的大家應...
Day 14 - 切版排版技巧(二) : Width、格線系統(Bs) 每日一談 嗨,大家好 ! 我是阿蘇今天是Day14, 今天繼續談切版排版技巧,除了fl...
情境 當我們內容超出頁面的時候,我們會設置滾動條。上個單元中,我們介紹了使用 auto 來設置,避免不需要的時候還出現滾動條: .card { overfl...
我們來做下圖的小卡片: 並補充說明 HTML 的 影片 標籤 及 清單 標籤。 清單分兩種:無序清單(unordered list):使用 <ul>...
今天要來做的是由多個正方形所組成的hover面板 超白話畫面和功能拆解 面板主要由多個小正方形所組成 當滑鼠經過正方形,就會產生不同的顏色,離開正方形顏色...
資產負債表 養分篇中提到了CSS選擇器包含:通用選擇器 標籤(元素)選擇器 類別選擇器 ID選擇器;偽裝(上)篇介紹虛擬類別中的狀態選擇器(特殊狀態下才被套用)...
我們在設計版面的時候,客戶常常要求這個圖片要上面一點還是下面一點等等,都是要設置物件margin和padding,margin 與 padding 分別控制物件...
組件實作 : Demo 一、前言 關於 JavaScript 的故事其實是這樣的:「JavaScript 誕生於 1995 年的景網通訊(Netscape...
在我們瀏覽網站時,可能會看到購物網站、風景網站等等使用slider來切換圖片,最常見的應該就是三個小點~今天我們就來實作Day #19 Slider with...
您好,歡迎光臨CSS甜點烘焙店 今天上架的是草莓塔 餅乾主要分成3個部份,塔、乳酪餡及草莓Html結構如下: .cream .main .berry...
前言 文字樣式設計變化之後那可以試試看更改背景還有框線設計 background color / image 背景顏色 / 圖片 Background-siz...
組件實作:Demo 一、前言 Typing Effect 是一種好用的文字效果,看似簡單的語法下,其實藏著一些不太好理解的概念,例如 CSS 的 Anim...
首先要先把六個正方形放入 "space" 中,並寫上 1~6 點的符號 <body> <div class=&qu...
情境 今天我們來討論一個卡片容器的例子: 當內容在一般裝況下,我們不會需要滾動條,但是當內容長度過多時,我們會需要滾動調,讓我們在不改變卡片容器大小的狀況下,...