NT$1,650
【課程通知】HTML & CSS 下集 上架啦~
最新討論





課程資訊
【課程通知】HTML & CSS 下集 上架啦~
適合對象
你可以學到
課程介紹
學習前基本能力
學習前準備
課程資訊
關於講師

張互賓
自 2009 年從業以來,即參與網站建置相關領域的工作,從需求、設計、開發、維護、管理,皆有所涉略,也不斷地接受客戶的委託,承接專案,期許能為想打造網站的公司或個人,解決網站大小事。
現況|
▹ 緯育 TibaMe 就業養成班講師
▹ 接案 自由工作者 Freelancer
▹ 建立 「WebMix - 設計好網站」粉絲頁,分享網站知識及文章。
▹ 成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。
經歷|
▹ 2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
▹ 2013 年:全職的網站前端自由工作者。
▹ 2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
▹ 2017 年:承接標案。
▹ 2018 年:網站相關教學。
▹ 2019 年:合夥存股管家。
作品分享(部份)|
01、5breakfast 早餐平台網站
02、X Fail 活動網站
03、鉅亨網債劵基金排行網頁
04、matchnow 網紅平台網站
05、上海在野設計網站
06、毅創投資網站
07、MBA 顧問網站
08、智夢網站
09、RocketAdmit網站
10、臺南市政府圖片資料庫平台網站
11、王爺水餃子網站
12、雕塑學會網站
13、亞太公私合夥建設發展協會網站
14、長風文教基金會網站
15、矽谷創業家協會網站
聯絡方式|
▹ 張互賓/Carlos
▹ 個人 FB( https://www.facebook.com/hubin )
▹ FB 專頁( https://www.facebook.com/webmix.cc/ )
▹ 個人 email: [email protected]
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
簡介前端主要程式:HTML、CSS、JS
QUIZ:簡介前端主要程式:HTML、CSS、JS
工具:編輯器及瀏覽器
QUIZ:工具:編輯器及瀏覽器
第一個網頁快速上手
QUIZ:第一個網頁快速上手
HTML 網頁文件基本結構
QUIZ:HTML 網頁文件基本結構
認識版本宣告、標籤、元素、屬性
QUIZ:認識版本宣告、標籤、元素、屬性
HTML 撰寫注意事項
QUIZ:HTML 撰寫注意事項
保留文字格式
QUIZ:保留文字格式
表示程式的標籤
QUIZ:表示程式的標籤
註解
QUIZ:註解
網頁標題
QUIZ:網頁標題
中介資料(Meta Data)
QUIZ:中介資料(Meta Data)
時間
QUIZ:時間
縮寫
QUIZ:縮寫
斷行與水平分隔線
QUIZ:斷行與水平分隔線
段落
QUIZ:段落
內容標題
QUIZ:內容標題
引用
QUIZ:引用
結構練習一
QUIZ:結構練習一
列表
QUIZ:列表
清單
QUIZ:清單
連結
QUIZ:連結
圖片
QUIZ:圖片
獨立內容
QUIZ:獨立內容
表格
QUIZ:表格
嵌入外站
QUIZ:嵌入外站
span 和 div
QUIZ:span 和 div
有語意的結構標籤
QUIZ:有語意的結構標籤
結構練習二
QUIZ:結構練習二
HTML Entity(實體)
QUIZ:HTML Entity(實體)
簡介 SVG
QUIZ:簡介 SVG
簡介 canvas
QUIZ:簡介 canvas
影片
QUIZ:影片
音訊
QUIZ:音訊
其它標籤
QUIZ:其它標籤
HTML 所有標籤
QUIZ:HTML 所有標籤
基本結構
QUIZ:基本結構
文字框:一般文字
QUIZ:文字框:一般文字
文字框:密碼
QUIZ:文字框:密碼
文字框:隱藏
QUIZ:文字框:隱藏
多行文字框
QUIZ:多行文字框
單選
QUIZ:單選
勾選(核取方塊)
QUIZ:勾選(核取方塊)
下拉選單
QUIZ:下拉選單
一般按鈕與資料送出按鈕
QUIZ:一般按鈕與資料送出按鈕
認識資料傳遞方式
QUIZ:認識資料傳遞方式
傳遞檔案
QUIZ:傳遞檔案
表單練習(上)
表單練習(下)
QUIZ:表單練習
套用 CSS
QUIZ:套用 CSS
註解
QUIZ:註解
選取器 - 屬性及值
QUIZ:選取器 - 屬性及值
選取器 - 符號
QUIZ:選取器 - 符號
選器取 - class 和 id
QUIZ:選器取 - class 和 id
關於優先權
QUIZ:關於優先權
偽元素(Pseudo Element)
QUIZ:偽元素(Pseudo Element)
偽類別(Pseudo Class)(上)
偽類別(Pseudo Class)(下)
QUIZ:偽類別(Pseudo Class)
display 屬性
QUIZ:display 屬性
區塊模型(Box Model) (上)
區塊模型(Box Model) (下)
QUIZ:區塊模型(Box Model)
同層對齊(vertical-align)
QUIZ:同層對齊(vertical-align)
定位(position)- 固定定位
QUIZ:定位(position)- 固定定位
定位(position)- 相對定位
QUIZ:定位(position)- 相對定位
定位(position)- 絕對定位
QUIZ:定位(position)- 絕對定位
定位(position)- sticky 定位
QUIZ:定位(position)- sticky 定位
浮動(float)
QUIZ:浮動(float)
二欄固定式版型(上)
二欄固定式版型(下)
QUIZ:二欄固定式版型
練習導覽列(上)
練習導覽列(下)
QUIZ:練習導覽列
文字大小(font-size)
QUIZ:文字大小(font-size)
文字粗體(font-weight)
QUIZ:文字粗體(font-weight)
字體樣式(font-style)
QUIZ:字體樣式(font-style)
文字畫線(text-decoration)
QUIZ:文字畫線(text-decoration)
英文字大小寫(text-transform)
QUIZ:英文字大小寫(text-transform)
文字水平對齊(text-align)
QUIZ:文字水平對齊(text-align)
文字行高(line-height)
QUIZ:文字行高(line-height)
關於空格(white-space)
QUIZ:關於空格(white-space)
文字斷行(word-break)及連字符號(hyphens)
QUIZ:文字斷行(word-break)及連字符號(hyphens)
文字顏色(color)
QUIZ:文字顏色(color)
指定字體(font-family)
QUIZ:指定字體(font-family)
背景顏色(background-color)
QUIZ:背景顏色(background-color)
背景圖(background-image)
QUIZ:背景圖(background-image)
背景圖反覆出現(background-repeat)
QUIZ:背景圖反覆出現(background-repeat)
背景圖大小(background-size)
QUIZ:背景圖大小(background-size)
背景圖位置(background-position)
QUIZ:背景圖位置(background-position)
背景圖固定模式(background-attachment)
QUIZ:背景圖固定模式(background-attachment)
背景圖顯示區域(background-origin)
QUIZ:背景圖顯示區域(background-origin)
背景圖裁切(background-clip)
QUIZ:背景圖裁切(background-clip)
背景線性漸層
QUIZ:背景線性漸層
同個區域可設定多個背景
QUIZ:同個區域可設定多個背景
內容超出區域(overflow)
QUIZ:內容超出區域(overflow)
限制單行文字,出現省略符號(text-overflow)
QUIZ:限制單行文字,出現省略符號(text-overflow)
連結樣式
QUIZ:連結樣式
列表樣式
QUIZ:列表樣式
表格樣式
QUIZ:表格樣式
元素不透明度(opacity)
QUIZ:元素不透明度(opacity)
元素是否可見(visibility)
QUIZ:元素是否可見(visibility)
元素輪廓(outline)
QUIZ:元素輪廓(outline)
游標(cursor)
QUIZ:游標(cursor)
圓角(border-radius)
QUIZ:圓角(border-radius)
區塊陰影(box-shadow)
QUIZ:區塊陰影(box-shadow)
文字陰影(text-shadow)
QUIZ:文字陰影(text-shadow)
旋轉
QUIZ:旋轉
縮放
QUIZ:縮放
偏移
QUIZ:偏移
傾斜
QUIZ:傾斜
同時套用多種形變效果
QUIZ:同時套用多種形變效果
flex 和 inline-flex
QUIZ:flex 和 inline-flex
Flex Container 和 Flex Items
QUIZ:Flex Container 和 Flex Items
主軸(Main Axis)和交錯軸(Cross Axis)
QUIZ:主軸(Main Axis)和交錯軸(Cross Axis)
方向如何排列(flex-direction)
QUIZ:方向如何排列(flex-direction)
是否斷行(flex-wrap)
QUIZ:是否斷行(flex-wrap)
方向與斷行的縮寫(flex-flow)
QUIZ:方向與斷行的縮寫(flex-flow)
Items 在主軸中如何排列(justify-content)
QUIZ:Items 在主軸中如何排列(justify-content)
Items 在交錯軸中如何排列(align-content)
QUIZ:Items 在交錯軸中如何排列(align-content)
各 Items 之間,在交錯軸中如何排列(align-items)
QUIZ:各 Items 之間,在交錯軸中如何排列(align-items)
只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)
QUIZ:只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)
指定順序(order)
QUIZ:指定順序(order)
自動擴展(flex-grow)
QUIZ:自動擴展(flex-grow)
自動壓縮(flex-shrink)
QUIZ:自動壓縮(flex-shrink)
設定寬或高(flex-basis)
QUIZ:設定寬或高(flex-basis)
縮寫形式(flex)
QUIZ:縮寫形式(flex)
使用 Flexbox 建立固定式二欄排版
QUIZ:使用 Flexbox 建立固定式二欄排版
網頁建立、header 區塊及變數寫法(上)
網頁建立、header 區塊及變數寫法(下)
QUIZ:網頁建立、header 區塊及變數寫法
LOGO 及導覽列左側
QUIZ:LOGO 及導覽列左側
導覽列右側(上)
導覽列右側(下)
QUIZ:導覽列右側
滿版背景圖
QUIZ:滿版背景圖
footer 區域
QUIZ:footer 區域
中間區域及二欄式切版
QUIZ:中間區域及二欄式切版
側邊欄表單分類
QUIZ:側邊欄表單分類
商品列表區域(上)
商品列表區域(下)
QUIZ:商品列表切版
商品簡介及購買表單(上)
商品簡介及購買表單(下)
QUIZ:商品簡介及購買表單
商品圖文編排(上)
商品圖文編排(下)
QUIZ:商品圖文編排
詢問表單排版(上)
詢問表單排版(下)
QUIZ:詢問表單排版
麵包屑(Breadcrumb)
QUIZ:麵包屑(Breadcrumb)
直向圖文編排
QUIZ:直向圖文編排
文繞圖
QUIZ:文繞圖
自訂下拉選單外觀
QUIZ:自訂下拉選單外觀
分頁(Pagination)(上)
分頁(Pagination)(下)
QUIZ:分頁(Pagination)
三角形
QUIZ:三角形
tooltip
QUIZ:tooltip
popover
QUIZ:popover
表單欄位群組化(Input Group)
QUIZ:表單欄位群組化(Input Group)
進度條(Progress Bar)
QUIZ:進度條(Progress Bar)
自訂核取方塊
QUIZ:自訂核取方塊
雙態開關
QUIZ:雙態開關
列表項目符號替換
QUIZ:列表項目符號替換
影片第一屏滿版
QUIZ:影片第一屏滿版
頁籤(Tab)(上)
頁籤(Tab)(下)
QUIZ:頁籤(Tab)
學習附件
購買此課程後,才能使用留言功能
目前尚無任何討論主題
成為第一個發問的人!在問答中找到學習的捷徑。關於講師

張互賓
自 2009 年從業以來,即參與網站建置相關領域的工作,從需求、設計、開發、維護、管理,皆有所涉略,也不斷地接受客戶的委託,承接專案,期許能為想打造網站的公司或個人,解決網站大小事。
現況|
▹ 緯育 TibaMe 就業養成班講師
▹ 接案 自由工作者 Freelancer
▹ 建立 「WebMix - 設計好網站」粉絲頁,分享網站知識及文章。
▹ 成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。
經歷|
▹ 2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
▹ 2013 年:全職的網站前端自由工作者。
▹ 2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
▹ 2017 年:承接標案。
▹ 2018 年:網站相關教學。
▹ 2019 年:合夥存股管家。
作品分享(部份)|
01、5breakfast 早餐平台網站
02、X Fail 活動網站
03、鉅亨網債劵基金排行網頁
04、matchnow 網紅平台網站
05、上海在野設計網站
06、毅創投資網站
07、MBA 顧問網站
08、智夢網站
09、RocketAdmit網站
10、臺南市政府圖片資料庫平台網站
11、王爺水餃子網站
12、雕塑學會網站
13、亞太公私合夥建設發展協會網站
14、長風文教基金會網站
15、矽谷創業家協會網站
聯絡方式|
▹ 張互賓/Carlos
▹ 個人 FB( https://www.facebook.com/hubin )
▹ FB 專頁( https://www.facebook.com/webmix.cc/ )
▹ 個人 email: [email protected]
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。