我的 bootstrap 學習網站
大二開始玩html+css+bootstrap+一些些的網頁程式語言
就這樣組合起來嘍!
dmtsai at mail dot ksu dot edu dot tw
學習 BS 4
基礎學習
導覽列與版面配置
表單與 PHP
HTML & CSS
單純 HTML
搭配 CSS
期中報告前的大練習
學習進展
期中考大站
單頁式網頁製作
期末考網站
網站地圖
關於我
註冊
登入
CSS學習
第九堂課的上課練習
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: 照片就隨便你丟
第八堂課的上課練習
例題 8.2.A: 版片配置-單欄式設計
例題 8.2.B: 版片配置-兩欄式設計
第七堂課的上課練習
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: 主要的版面配置建置
第六堂課的上課練習
6.1.A: 背景的漸層效果初探
6.1.B: 背景的漸層效果--用於大頭照
6.2.A: 背景--多張背景的應用
6.2.B: 背景--背景填滿的效果-cover, contain
6.2.C: 背景--清單變成按鈕的效果
6.3.A: 照片圖文框的設計
6.5.A: 照片圖文框的設計-增加漸變功能 (類似動畫)
6.4.A: 方塊的變形--角度變化與疊圖
6.4.B: 方塊的變形--方塊的大小、位置
6.6.A: 讓圖片自己動的小小動畫效果
第五堂課的上課練習
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 的隱藏效果
第四堂課的上課練習
4.1.A:簡易的 CSS 字型處理
4.1.B:簡易的 CSS 字型處理+padding(內部留白)
4.1.D:使用本伺服器提供的中文字型
4.2.A:超連結的使用
4.2.B:a 超連結變成區塊
4.3.A:任何地方都能用 hover
4.4.A:清單的效果 - 中文號碼清單
4.4.B:項目變圖片
4.5.A:表格的效果
4.5.B:表格功能 -border-collapse
4.6.A:繼承- 清單
4.6.B:繼承- 後代子孫不會被影響
4.6.C:display的隱藏效果
第三堂課的上課練習
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風格設定檔
我的 Bootstrap學習重點
這是CSS練習