情境 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...
Taiming
ruhui0726
icetong
indexhui
iThome鐵人賽
看影片追技術