建智的 bootstrap 學習網站
大二同學要記得玩 HTML + CSS + bootstrap + 一點點網頁程式語言
這樣就組合成你的整體網站囉
jack870914 at gmail dot com
學習 BS 4
基礎學習
導覽列與版面配置
表單與 PHP
HTML & CSS
單純的 HTML
添加 CSS 效果
期中報告前的大練習
學習進展
期中考大站
單頁式網頁製作
期末考網站
網站地圖
關於我
註冊
登入
CSS
第三堂課
3.1.B： 使用 CSS 的 style 取代 font, strong 等標記
3.2.A： 使用 CSS 的 「數值單位」 修改某些特性的大小
3.2.B： 搭配 Body 的 CSS 整體網頁風格的效果
3.3.A： 直接在 head 內增加 style 設定 CSS 風格
3.3.B： 在表格上面套用底圖的設計方式
3.4.A： 使用 CSS 套用表格兩個不同橫列的設計
3.4.B： 統一表格的單一 class 設計方式
3.5.A： 使用 id 取代 class 的功能
3.6.A： 呼叫外部 CSS 風格設定檔
第四堂課
4.1.A： 使用 CSS 修改字體相關的功能顯示
4.1.B： 在字框與字體之間透過 padding 保留空白留白感
4.1.D： 使用本伺服器提供的中文字型
4.2.A： 超連結的 :hover, :active :focus 特效
4.2.B： 讓超連結變成區塊顯示 (display: block)
4.3.A： :hover 用在其他任意的地方
4.4.A： 清單的效果-中文號碼清單
4.4.B： 清單的效果-使用圖檔來取代前導符號
4.5.A： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表
4.5.B： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表(collapse 的框線重疊)
4.6.A： 以清單來說明使用 ul li 會產生的後代繼承影響問題
4.6.B： 承上，使用 ul > li 討論後代就不會繼承的效應
4.6.C： 使用 display 搭配 :hover 討論影藏資料的特效
第五堂課
5.1.A： 方塊初探
5.1.B： 方塊 - 水平置中
5.1.C： 方塊 - 框線的圓角+陰影
5.1.D： 方塊 - 框線的圓角+陰影自製的邊框 (90x90x 為例)
5.2.A： 方塊 - 將方塊變成行內元素
5.2.B： 方塊 - 盡量不要跑版的設計之一
5.2.C： 方塊 - 用 vertical-align 進行向上對齊的功能 (放在子元素內歐~)
5.2.D： 方塊 - 用 float 進行向上對齊的功能
5.2.E： 方塊 - 加上 overflow 得父元素的功能
5.3.A： 方塊 - 兩個方塊的重疊與透明度
5.3.B： 方塊 - 透過 z-index 調整元素的圖層上/下
5.3.C： 方塊 - position 位置初探
5.3.D： 方塊 - position - relative 的移動
5.3.E： 方塊 - position - absolute 的移動
5.3.F： 方塊 - position - fixed 固定的位置上
5.4.A： 方塊 - overflow 的探討
5.4.B： 方塊 - 圓形大頭貼
5.4.C： 方塊 - visibility 的影藏效果
第六堂課
6.1.A： 背景的漸層效果初探
6.1.B： 背景的漸層效果--用於大頭照
6.2.A： 背景--多張背景的應用
6.2.B： 背景--背景填滿的效果-cover, contain
6.2.C： 背景--清單變成按鈕的效果
6.3.A： 照片圖文框的設計
6.4.A： 方塊的變形--角度變化與疊圖
6.4.B： 方塊的變形--方塊的大小、位置
6.5.A： 照片圖文框的設計-增加漸變功能 (類似動畫)
6.6.A： 讓圖片自己動的小小動畫效果
6.6.B： 讓小企鵝自己轉圈圈
6.6.C： 『寧夏』歌詞，背景讓蜜蜂跑來跑去
6.6.D： 五個畫面裡面有超連結加上互相輪轉的功能
第七堂課
7.1.A： 用清單設計導覽列
7.1.B： 用清單設計導覽列 - 增加目前瀏覽中的頁面
7.1.C： 用清單設計導覽列 - 增加目前瀏覽中的頁面 - 連在一起
7.2.A： 用清單設計導覽列 - 兩層導覽列
7.2.B： 用清單設計導覽列 - 兩層導覽列 - 加上下拉效果
7.3.A： 用圖片進行超連結的 map 功能
7.4.B： 使用 Balsamiq Mark 進行快速版面配置作業
7.5.A： 主要的版面配置建置
CSS
CSSCSSCSS
CSS
第三堂課
3.1.B： 使用 CSS 的 style 取代 font, strong 等標記
3.2.A： 使用 CSS 的 「數值單位」 修改某些特性的大小
3.2.B： 搭配 Body 的 CSS 整體網頁風格的效果
3.3.A： 直接在 head 內增加 style 設定 CSS 風格
3.3.B： 在表格上面套用底圖的設計方式
3.4.A： 使用 CSS 套用表格兩個不同橫列的設計
3.4.B： 統一表格的單一 class 設計方式
3.5.A： 使用 id 取代 class 的功能
3.6.A： 呼叫外部 CSS 風格設定檔
第四堂課
4.1.A： 使用 CSS 修改字體相關的功能顯示
4.1.B： 在字框與字體之間透過 padding 保留空白留白感
4.1.D： 使用本伺服器提供的中文字型
4.2.A： 超連結的 :hover, :active :focus 特效
4.2.B： 讓超連結變成區塊顯示 (display: block)
4.3.A： :hover 用在其他任意的地方
4.4.A： 清單的效果-中文號碼清單
4.4.B： 清單的效果-使用圖檔來取代前導符號
4.5.A： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表
4.5.B： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表(collapse 的框線重疊)
4.6.A： 以清單來說明使用 ul li 會產生的後代繼承影響問題
4.6.B： 承上，使用 ul > li 討論後代就不會繼承的效應
4.6.C： 使用 display 搭配 :hover 討論影藏資料的特效
第五堂課
5.1.A： 方塊初探
5.1.B： 方塊 - 水平置中
5.1.C： 方塊 - 框線的圓角+陰影
5.1.D： 方塊 - 框線的圓角+陰影自製的邊框 (90x90x 為例)
5.2.A： 方塊 - 將方塊變成行內元素
5.2.B： 方塊 - 盡量不要跑版的設計之一
5.2.C： 方塊 - 用 vertical-align 進行向上對齊的功能 (放在子元素內歐~)
5.2.D： 方塊 - 用 float 進行向上對齊的功能
5.2.E： 方塊 - 加上 overflow 得父元素的功能
5.3.A： 方塊 - 兩個方塊的重疊與透明度
5.3.B： 方塊 - 透過 z-index 調整元素的圖層上/下
5.3.C： 方塊 - position 位置初探
5.3.D： 方塊 - position - relative 的移動
5.3.E： 方塊 - position - absolute 的移動
5.3.F： 方塊 - position - fixed 固定的位置上
5.4.A： 方塊 - overflow 的探討
5.4.B： 方塊 - 圓形大頭貼
5.4.C： 方塊 - visibility 的影藏效果
第六堂課
6.1.A： 背景的漸層效果初探
6.1.B： 背景的漸層效果--用於大頭照
6.2.A： 背景--多張背景的應用
6.2.B： 背景--背景填滿的效果-cover, contain
6.2.C： 背景--清單變成按鈕的效果
6.3.A： 照片圖文框的設計
6.4.A： 方塊的變形--角度變化與疊圖
6.4.B： 方塊的變形--方塊的大小、位置
6.5.A： 照片圖文框的設計-增加漸變功能 (類似動畫)
6.6.A： 讓圖片自己動的小小動畫效果
6.6.B： 讓小企鵝自己轉圈圈
6.6.C： 『寧夏』歌詞，背景讓蜜蜂跑來跑去
6.6.D： 五個畫面裡面有超連結加上互相輪轉的功能
第七堂課
7.1.A： 用清單設計導覽列
7.1.B： 用清單設計導覽列 - 增加目前瀏覽中的頁面
7.1.C： 用清單設計導覽列 - 增加目前瀏覽中的頁面 - 連在一起
7.2.A： 用清單設計導覽列 - 兩層導覽列
7.2.B： 用清單設計導覽列 - 兩層導覽列 - 加上下拉效果
7.3.A： 用圖片進行超連結的 map 功能
7.4.B： 使用 Balsamiq Mark 進行快速版面配置作業
7.5.A： 主要的版面配置建置
