WEB2 CSS 相關的網頁內容

• 姓名: 張智榮
• 學號: 4070C045
• 回首頁

• 第三堂課
  • 第 3 堂課 - 3.1.B-第一次使用 CSS
  • 第 3 堂課 - 3.2.A-CSS 單位的理解
  • 第 3 堂課 - 3.2.B-CSS 顏色的使用
  • 第 3 堂課 - 3.3.A-CSS 在head使用style
  • 第 3 堂課 - 3.3.B-CSS 使用圖檔
  • 第 3 堂課 - 3.4.A-CSS 類別的使用
  • 第 3 堂課 - 3.4.B-CSS 使用類別與背景
  • 第 3 堂課 - 3.5.A-CSS 使用 id 來設計 CSS 阿
  • 第 3 堂課 - 3.6.A-CSS 使用外部呼叫的 CSS 方式
• 第四堂課
  • 第 4 堂課 - 4.1.A-CSS 字體字形的應用
  • 第 4 堂課 - 4.1.B-加上 padding 的留白應用
  • 第 4 堂課 - 4.1.D-使用 Google的免費字形
  • 第 4 堂課 - 4.2.A-超連結的 :hover特效
  • 第 4 堂課 - 4.2.B-把 a 變成區塊元素(display: block)
  • 第 4 堂課 - 4.3.A-任何東西都用 :hover 效果
  • 第 4 堂課 - 4.4.A-CSS 的清單特效
  • 第 4 堂課 - 4.4.B-CSS 的清單特效-圖形效果
  • 第 4 堂課 - 4.5.A-CSS 的表格效果
  • 第 4 堂課 - 4.5.B-CSS 的表格效果-摺疊(collapse)效果
  • 第 4 堂課 - 4.6.A-CSS 賦予 父與子的繼承問題
  • 第 4 堂課 - 4.6.B-CSS 父與子的繼承關係-使用 >
  • 第 4 堂課 - 4.6.C-CSS 的隱藏效果
• 第五堂課
  • 第 5 堂課 - 5.1.A-CSS 的 div 方塊應用
  • 第 5 堂課 - 5.1.B-CSS 的 div 方塊 - 置中的應用
  • 第 5 堂課 - 5.1.C-CSS 的 div 方塊 - 圓角與陰影
  • 第 5 堂課 - 5.1.D-div 框線應用-圖檔用作框線
  • 第 5 堂課 - 5.2.A-div 的 inline
  • 第 5 堂課 - 5.2.B-div 的簡易排版方式
  • 第 5 堂課 - 5.2.C-div 的垂直排版方式(vertical-align)
  • 第 5 堂課 - 5.2.D-div 的 的簡易排版 - float 的使用
  • 第 5 堂課 - 5.2.D-div 的 的簡易排版 - float 搭配 overflow
  • 第 5 堂課 - 5.3.A-版面調配- 預設的 margin 處理即可
  • 第 5 堂課 - 5.3.B-版面調配- relative 搭配 z-index 調整塗層
  • 第 5 堂課 - 5.3.C-版面調配- 標準調配方塊
  • 第 5 堂課 - 5.3.D-版面調配- relative 的單一方塊移動
  • 第 5 堂課 - 5.3.E-版面調配- absolute 同一個參考原點
  • 第 5 堂課 - 5.3.F-版面調配- fixed 固定在瀏覽器的某個地方
  • 第 5 堂課 - 5.4.A-版面調配- 用 overflow 控制過多的資料
  • 第 5 堂課 - 5.4.B-使用 hidden 設計圓形大頭貼
  • 第 5 堂課 - 5.4.C-使用隱藏來處理算命的答案
• 第六堂課
  • 第 6 堂課 - 6.1.A-使用漸層背景色
  • 第 6 堂課 - 6.1.B-使用漸層背景色-大頭彩虹圖
  • 第 6 堂課 - 6.2.A-背景圖的應用-三張背景圖同時存在
  • 第 6 堂課 - 6.2.B-背景圖的應用-填滿背景的 contain , cover 用法
  • 第 6 堂課 - 6.2.C-背景圖的應用-假裝的按鈕設計
  • 第 6 堂課 - 6.3.A-圖片的放大應用
  • 第 6 堂課 - 6.4.A-圖片的選轉應用 -transfrom: rotate 功能
  • 第 6 堂課 - 6.4.A-圖片的位移與尺寸變化-transfrom:translate,scale 功能
  • 第 6 堂課 - 6.5.A-圖片的漸變特效 - transition 功能
  • 第 6 堂課 - 6.6.A-圖片的漸變特效 - 使用動畫讓他自己動
  • 第 6 堂課 - 6.6.C-圖片的漸變特效 - 讓蜜蜂自己飛來飛去
  • 第 6 堂課 - 6.6.D-圖片的漸變特效 - 讓超連結框循環轉來轉去
  • 第 6 堂課 - 6.6.E-圖片的漸變特效 - 單純給你看不給點擊的旋轉圖
• 第七堂課
  • 第 7 堂課 - 7.1.A-清單做成導覽列的練習
  • 第 7 堂課 - 7.1.B-清單做成導覽列的練習 - 增加一個網頁識別項目
  • 第 7 堂課 - 7.1.C-清單做成導覽列的練習 - 讓按鈕綁在一起
  • 第 7 堂課 - 7.2.A-具有下拉式的第二層選單效果
  • 第 7 堂課 - 7.3.A-使用圖片當作按鈕方式
  • 第 7 堂課 - 7.4.B-用 balsamiq 做快速版面配置示意圖
  • 第 7 堂課 - 7.5.A-完整的版面配置實際製作
• 第八堂課
  • 第 8 堂課 - 8.2.A-單欄式版面設計
• 第九堂課
  • 第 9 堂課 - 9.1.A-第一個 PHP 網頁測試
  • 第 9 堂課 - 9.1.B-練習 PHP 的變數
  • 第 9 堂課 - 9.1.C-1-陽春迴圈練習
  • 第 9 堂課 - 9.1.C-2-色票製作 - 單迴圈
  • 第 9 堂課 - 9.1.C-3-色票製作 - 雙迴圈
  • 第 9 堂課 - 9.1.C-4-色票製作 - 三迴圈
  • 第 9 堂課 - 9.1.D-色票製作 - 對比色的處理
  • 第 9 堂課 - 9.1.E-用 date 函數去抓伺服器時間
  • 第 9 堂課 - 9.1.F-用 if 搭配 date 回應時間應答
  • 第 9 堂課 - 9.2.A-用呼叫外部檔案來實驗
  • 第 9 堂課 - 9.3.A-從網址列輸入變數內容
  • 第 9 堂課 - 9.3.B-從網址列輸入變數內容-增加 XSS 防禦
  • 第 9 堂課 - 9.4.A-剪刀石頭布
  • 第 9 堂課 - 9.4.B-跟電腦猜拳
  • 第 9 堂課 - 9.4.C-隨機產生人物屬性的方式
  • 第 9 堂課 - 9.4.D-許多照片隨便丟在某個空間內

Home Works

• 第三堂
  • 3.7.2 外部的 CSS 風格設定檔主要內容
  • 3.7.3 以 CSS 風格取代HTML的課表展示
  • 3.7.4 以 CSS 風格取代HTML的特殊符號對應表
  • 3.7.5 以 CSS 風格取代HTML的書籍清單展示
• 第四堂
  • 4.7.2 以 CSS 修飾古文的展示
  • 4.7.4 以 CSS 修飾清單以及巢狀清單的隱藏使用
  • 4.7.5 以 CSS 修飾表格以及 :hover 的美化
• 第五堂
  • 5.5.2 使用 position 進行排版
  • 5.5.3 使用 :hover 搭配 visibility 進行答案隱藏
• 第六堂
  • 6.7.2 使用 position 進行排版
  • 6.7.3 直立的按鈕改橫式按鈕，並增加一個按鈕
  • 6.7.4 圖示放大變成在正中央放大不是向右下方放大的模樣
  • 6.7.5 承上，加上漸變的功能
  • 6.7.6 蜜蜂飛來飛去，衝向螢幕來嚇你
  • 6.7.7 照片的幻燈片淡出/淡入效果功能
• 第七堂
  • 7.6.2 使用較清爽的導覽列模式
  • 7.6.3 讓原本橫的導覽列變成直的導覽列模式
  • 7.6.4 預計達成的期中報告網站列表
  • 7.6.5 透過地圖連結以及清單項目的絕對位址說明
• 第九堂
  • 9.5.2 九九乘法列表
  • 9.5.3 剪刀石頭布
  • 9.5.4 透過陣列設計以及亂數，取得最大獎的抽獎活動