怡雯的 bootstrap 學習網站
大二同學要記得玩 HTML + CSS + bootstrap + 一點點網頁程式語言
這樣就組合成你的整體網站囉
janelee8293@gmail.com
學習 BS 4
基礎學習
導覽列與版面配置
表單與 PHP
HTML & CSS
單純 HTML
搭配 CSS
期中報告前的大練習
學習進展
期中考大站
單頁式網頁製作
期末考網站
網站地圖
關於我
註冊
登入
HTML 標記學習
第三堂課的內容
例題3.1.B:第一次使用CSS取代
例題3.2.A:探討CSS的單位
例題3.2.B:探討CSS的簡易使用
例題3.3.A:CSS在head使用的整體設定值
例題3.3.B:CSS處理背景
例題3.4.A:CSS處理兩種不同的class
例題3.4.B:CSS處理table的底圖
例題3.5.A:CSS使用id去呼叫，不是用class
例題3.6.A:使用外部呼叫的style.css樣式
第四堂課的內容
例題 4.1.A: 簡易的 CSS 字型處理
例題 4.1.B: 簡易的 CSS 字型處理+padding(內部留白)
例題 4.1.D: 使用本伺服器提供的中文字型
例題 4.2.A: 超連結的使用
例題 4.2.B: A 超連結變成區塊 (block)
例題 4.3.A: 任何地方都能用 :hover
例題 4.4.A: 清單的效果-中文號碼清單
例題 4.4.B: 清單的效果-項目變成圖片
例題 4.5.A: 表格功能的 CSS 修訂
例題 4.5.B: 表格功能 - border-collapse 功能
例題 4.6.A: 繼承 - 清單為例
例題 4.6.B: 繼承 - 後代子孫不會被影響
例題 4.6.C: 繼承 - display 的隱藏效果
第五堂課的內容
例題 5.1.A: 方框初探
例題 5.1.B: 方塊-水平置中
例題 5.1.C: 方塊-框線的圓角+陰影
例題 5.1.D: 方塊-自製的邊框圖片(90x90 為例)
例題 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: 讓圖片自己動的小小動畫
第七堂課的內容
例題 7.1.A: 用清單設計導覽列
例題 7.1.B: 用清單設計導覽列-增加目前瀏覽中的頁面
例題 7.1.C: 用清單設計導覽列-增加目前瀏覽中的頁面-連在一起
例題 7.2.A: 用清單設計導覽列-兩層導覽列
例題 7.2.B: 用清單設計導覽列-兩層導覽列-加上下拉效果
例題 7.3.A: 用圖片進行超連結的 map 功能
例題 7.4.B: 使用 Balsamiq 設計簡單的網頁草圖
例題 7.5.A: 主要的版面配置建置
第八堂課的內容
例題 8.2.A: 版片配置-單欄式設計
例題 8.2.B: 版片配置-兩欄式設計
第九堂課的內容
例題 9.1.A: 我的第一個PHP網頁
例題 9.1.B: 使用變數處理
例題 9.1.C: 迴圈搭配表格秀出網頁安全色
例題 9.1.D: 迴圈搭配表格秀出網頁安全色-對比色
例題 9.1.E: 用PHP抓伺服器的時間
例題 9.1.F: 用date()判斷時間，並告知問候語
例題 9.2.B: 透過function處理時間問候語
例題 9.3.A: 使用網址傳遞給伺服器處理
例題 9.3.B: 使用網址傳遞給伺服器處理-解決XSS
例題 9.4.A: 電腦隨機出拳
例題 9.4.B: 電腦隨機出拳-假設你先出剪刀
例題 9.4.C: 隨機計算人物屬性
例題 9.4.D: 照片隨便丟
Home Works
第九節課程課後練習
習題:9.5.2:九九乘法表列表
習題9.5.3:剪刀石頭布
習題9.5.4:透過陣列設計以及亂數，取得最大獎的抽獎活動
第七節課程課後練習
習題7.6.2:使用較清爽的導覽列模式
習題7.6.3:讓原本橫的導覽列變成直的導覽列模式
習題7.6.4:預計達成的期中報告網站列表
習題7.6.5:透過地圖連結以及清單項目的絕對位址說明
第六節課程課後練習
習題:6.7.2:使用漸層處理與圖片重疊的技巧，處理彩虹人物像
習題6.7.3:直立的按鈕改橫式按鈕，並增加一個按鈕
習題6.7.4:圖示放大變成在正中央放大，不是向右下方放大的模樣
習題6.7.5:承上，加上漸變的功能
習題6.7.6:蜜蜂飛來飛去，衝向螢幕來嚇你
習題6.7.7:照片的幻燈片淡出/淡入效果功能
第五節課程課後練習
習題:5.5.2:使用position進行排版
習題5.5.3:使用hover搭配visibility進行答案隱藏
第四節課程課後練習
習題:4.7.2:外部的CSS風格設定檔主要內容
習題4.7.4:以CSS風格取代HTML的課表展示
習題4.7.5:以CSS風格取代HTML的特殊符號對應表
第三節課程課後練習
習題:3.7.2:外部的CSS風格設定檔主要內容
習題3.7.3:以CSS風格取代HTML的課表展示
習題3.7.4:以CSS風格取代HTML的特殊符號對應表
習題3.7.5:以CSS風格取代HTML的書籍清單展示
CSS風格樣式表的使用
搭配CSS
