陳琦的bootstrap學習網站
大二時學的HTML+CSS+bootstrap網站
dmtsai at mail dot ksu dot edu dot tw
學習 BS 4
基礎學習
導覽列與版面配
表單與 PHP
HTML & CSS
單純 HTML
搭配 CSS
期中報告前的大練習
學習進展
期中考大站
單頁式網頁製作
期末考網站
網站地圖
關於我
註冊
登入
CSS的效果
第三堂課
例題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:超連結變成區塊
例題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:方塊-自製邊框圖片(90*90為例)
例題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:方塊-relative的移動
例題5.3.E:方塊-absolute 的移動
例題5.3.F:方塊-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:透過functiom 處理時間問候語
例題9.3.A:從網址列修改變數資料
例題9.3.B:從網址列修改變數資料-解決XSS
例題9.4.A:電腦隨機出拳
例題9.4.B:跟電腦猜拳-假設先出剪刀
例題9.4.C:隨機計算人物屬性
例題9.4.D:照片隨便丟
添加 CSS 效果
CSS作業
