開發環境架設(二) : ejs版型管理、layout 每日一談 嗨,大家好 ! 我是阿蘇今天是Day21 ,今天分享開發環境架設 第二篇,我們來分享架設時使用...
前面完成了「Carousel」區塊,今天來完成「Reviews」的區塊。 數據收集 card 標題的樣式 Font-weight:Regular F...
開發環境架設(一) : Bootstrap 核心、SCSS架構 每日一談 嗨,大家好 ! 我是阿蘇到了第20天啦 ,剩下的天數都會來分享關於正式開發 Side...
Day 13 - 切版排版技巧(一) : Flex排版、Box模型 每日一談 嗨,大家好 ! 我是阿蘇今天是Day13 ,我們前面分享了HTML / CSS...
【主題一:Flexbox】單元: Flexbox基礎 彈性容器(flex container) 排列彈性項目 彈性內容 調整內容 對齊項目 align-sel...
設計大綱 在上一篇設計「Reviews」這個區塊時,有提到切版時可能會有「切不出來」的情況發生,所以只好把原本腦海裡想要的設計改成簡單兩行的卡片式去呈現。但是!...
Day 15 - 切版進階技巧(一) : CSS進階、CSS動畫、偽元素 每日一談 嗨,大家好 ! 我是阿蘇今天是Day15 , 不知不覺寫到了15天,不曉得...
main.css #calender{ margin: 0 auto; width: 90%; } .day, .date-block{ f...
排列彈性項目 預設情況下,無論flex-flow設定了什麼樣的數值,彈性容器中最後一個彈性項目之後的空間,一定是在main-end與cross-end方向...
開發環境架設(三) : Bootstrap 自訂基礎樣式 每日一談 嗨,大家好 ! 我是阿蘇今天是day22 ,今天分享開發環境架設 第三篇,我們來教大家如何...
設計大綱 Landing Page的主要色都偏深色,另外CTA也有用主要色作為背景顏色了,所以這邊的Footer就決定用淺色的Secondary-color來作...
設計大綱 原本想把Reviews做成一行六個、並且可以超出視窗,另外使用者可以用拖曳的方式去移動卡片。但看完Boostrap 5的官網,目前好像沒辦法切出超出視...
鐵人賽將近尾聲了~時間在不知不覺間也過得很快。 我們來切一個簡單的網頁吧! Wireframe 配置 方框中間有叉叉 : 表示 圖片 方框 : 表示...
專案開發技巧篇(五) : Bootstrap 元件客製化 每日一談 嗨,大家好 ! 我是阿蘇今天是Day27 ,今天分享的是 Bootstrap 元件客製化教...
專案開發技巧篇(四) : Bootstrap 元件 每日一談 嗨,大家好 ! 我是阿蘇今天是Day26 , 剩下最後倒數幾天,快要完結篇啦 !!今天分享的是...
設計大綱 早安!今天來設計痛點,這邊我想要做三欄式,列出三個他們目前主要可能會遇到的問題,再加上圖片,讓使用者有感到身受的感覺。另外,因為Grid system...
前面完成了「PainPoints」,今天來完成這一塊「小廣告」的區塊。 數據收集 Content標題的樣式 Font-weight:Bold Fon...
設計大綱 今天要來設計「方案」,外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話,那通常會有一個是「免費試用」方案讓使用者試用,從而引導使用...
大綱 昨天完成header的部分了,所以接下來就會進入main的部分,今天要完成的是「PainPoints」的區塊。(如下圖) 數據收集 標題的樣式 F...
1.標題(1).Event-input版index.php <div id="info-panel"> <div...
前面完成了「Reviews」區塊,今天來完成「Plans」的區塊。 數據收集 標題的樣式 Font-weight:Bold Font-size:3...
前面完成了「Pros」區塊,今天來完成「Steps」的區塊。 數據收集 標題的樣式 Font-weight:Medium Font-size:24p...
設計大綱 設計CTA的用意一方面是讓結尾不會來得太突然,另一方面是想在網頁的最後再來一個「Call To Action」。 由於上面已經有蠻多不同樣式的設計區塊...
一、屬性統整: 1-1、作用於彈性容器上: flex-direction(控制子項整體佈局方向) flex-wrap(控制子項整體單行顯示還是換行顯示) fl...
設計大綱 上一個區塊設計了使用者的「痛點」,因此接下來的區塊想要做一個「平台的小廣告」,讓使用者了解到我們這個平台可以幫助他們解決問題。由於上一個區塊並不是滿版...
設計大綱 昨天設計的「方案」區塊的背景設計是單純一個長方形+背景顏色+陰影。今天想來做點不一樣的,所以來寫個「進階挑戰」。這一個挑戰主要打算修改「方案的背景框」...
設計大綱 稱讚完平台的優點後,接下來的區塊就要向使用者介紹使用的流程,但因為現代人都很懶得看很冗長的「說明書」,所以使用流程會採用簡約的方式去做介紹。 因為上面...
專案開發技巧篇(二) : Bootstrap 開發響應式網頁 每日一談 嗨,大家好 ! 我是阿蘇今天是Day24 ,今天分享的是 以 Boostrap 為核...
其實體驗營已經結束一陣子了 最近才有空回來補齊每日作業,這邊寫的感覺都算是很基礎的東西,就給像我一樣的純新手看看,有興趣想報名六角的體驗營可以參考(對新手來說...
設計大綱 上一個區塊賣完小廣告後,今天馬上就給它塞個平台的優點進來,這樣可以讓使用者有「感同身受」的感覺,同時也能讓他們覺得「哇!好像真的很棒唷!」。 「優點」...