情境 CSS 選擇器的分組,能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。 舉個例子來說,假設我們要讓兩個元素都改變顏色,不用分組選擇器的寫法會是這樣...
頁尾 在這個範例中要練習頁尾的切版 整理幾個小重點如下方: 1.將footer_content設為滿版,添加背景色#f3c1c52.添加一個container,...
情境 響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為...
對話框&三角形 在這個範例中要練習對話框的接版,以及如何用css繪製出三角形 整理幾個重點: 1.將對話框dialog_box寬度設為960px,添加背...
國慶日快樂!!!連假最後一天,似乎是難過的陰天剩下五天鐵人賽,其實也挺難過的 今天想製作跑馬燈的功能,還有擴增海底世界~ 目標...是這樣拉 新增跑馬燈html...
連假第二天,我們來點產品規格,讓消費者能更了解他們預購買的商品,那就加入一些表格吧! html: <!DOCTYPE html> <html...
序號項目 在這個範例中要練習序號項目的切版 整理幾個小重點如下方: 1.font-size調整文字大小,font-weight調整文字厚度,line-heigh...
情境 步驟對話框/步驟條元件,是透過一系列的編號步驟來顯示當前操作的進度。由於某些操作過於複雜繁瑣,或者有順序性,以至於不太適合一次把全部的資訊展示在一個頁面當...
第一天連假!希望大家玩得愉快!! 小公主昨天大致上放了圖跟字,今天就建立個目錄標題!也好好把昨天的圖文稍微編輯的好看一些! 新功能建立:目錄頁(含滑鼠碰到的動畫...
情境 Flexbox 是 CSS3 的盒子模型(box model),他是我們現代響應式佈局設計上的一個重要利器。其中一個很重要的部分就是他可以幫助我們快速的做...
價格表 在這個範例中要練習價格表切版 整理幾個重點:1.將section_price設為滿版2.container,做為固定欄寬1200px的區塊,並設定dis...
恭喜大家開了雙十連假的前端,也邁入第四週了,484特累特想睡呢~沒事的我們終於要開始結合之前用過的功能了!算是複習! 首先訂購的話,要有商品圖,並讓消費者可以選...
圖文版面 在這個範例中要練習圖文版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊,...
情境 在網頁內容很豐富的情境中,頁面上放置導覽列是很重要的功能,如下圖: 假設這是一個新聞或論壇網站,左邊 aside 部分就是我們的導覽列,上面有網站的 B...
第三週最後一天,想讓你們學個實用ㄉ東西! 表單功能!! 其實表單要建立完整的話,要有前端的設計跟表格規劃,後面也要連動到後端才是完好的表單設計!but萬物都有但...
情境 CSS Grid 是一個格線佈局屬性,跟 Flexbox 的使用非常相似,是由外容器和內元件來組成整個結構。 以下面結構為例: <div class...
卡片版面6 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版,添加背景色#ffc6c62.container,做為固定欄寬...
今天是小公主生日!小公主想罷工!!沒就是我的vscode也突然打不開檔案,加上生日當天,只剩現在可以寫了~ 所以就...(罷工...喂~~)而且雖然進行到2/3...
卡片版面5 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...
情境 談到響應式的佈局排版,除了 Flexbox 之外,還有一個不容忽視的重要屬性,就是 Grid。 以下圖為例,我們透過 Grid 也能夠很輕易的將主要內容以...
今天是豔陽高照的星期二,我們前面都著重在各功能的講解與實作,好像都忘記訂單ㄌ....?所以開始介紹些訂單會使用的功能之一吧 下拉式選單 下拉式選單為選取數量的優...
卡片版面4 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...
情境 Flexbox 的排版已經太方便,以至於網頁上到處都可以發現 Flexbox 的蹤跡。今天我們再來舉一個例子,假設我們需要做一個使用者管理頁面,那我們可能...
Blue Monday again!沒事ㄉ,我們今天的進度延續前兩天的基本語法,今天來介紹boolean(布林值) 布林值是什麼概念呢? boolean呈現方式...
卡片版面3 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.在container設定display: flex讓資料橫...
情境 Flexbox 是 CSS3 的盒子模型(box model),顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box),這個模型讓排版變得容...
繼昨天介紹了基本語法string後,我們今天打鐵趁熱,一併來看看number的部分 數字(number) Number 物件屬於數值型態,包含整數 (integ...
卡片版面2 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...
情境 CSS Box Model 盒子模型是 CSS 的基礎。我們可以簡單的理解為, html 元素在 CSS 裡面,都可以視為一個一個的盒子(Box)。 如下...
昨天有介紹 Aspect Ratio 運用在 RWD 排版相當的方便 如下圖是旅遊類型的卡片 卡片排列四欄,卡片寬度會隨著螢幕寬度做變化,就很適合使用 Aspe...