陳崇佑的網頁設計自學網
姓名:陳崇佑
學號:4050C030
首頁
HTML課程
第一堂課的上課練習
第二堂課的上課練習
HTML作業
第一堂課課後練習
第二堂課課後練習
CSS課程
第三堂課的上課練習
第四堂課的上課練習
第五堂課的上課練習
第六堂課的上課練習
第七堂課的上課練習
第八堂課的上課練習
CSS作業
第三堂課課後練習
第四堂課課後練習
第五堂課課後練習
第六堂課課後練習
第七堂課課後練習
第八堂課課後練習
網站地圖
網站設計
佑哥自學網
>
首頁
>
HTML課程
>
第三堂課
第三堂課的上課練習
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.C:使用外部雲端字形(會有時間期限,已經失效)
4.1.D:Google與Adobe提供的字形顯示中文
4.2.A:超連結的:hover,:active,:focus特效
4.2.B:讓超連結變成區塊顯示(display:block)
4.3.A::hover用在其他任意的地方!
4.4.A:清單與:hover的同時應用
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:區塊標記的左右對齊方式:margin-right:auto
5.1.C:方塊加上圓角以及陰影方式
5.1.D:使用自製框限:border-image-source的使用
5.2.A:使用display:inline-block讓區塊標記在水平線上面對齊
5.2.B:在小方塊外面加上一個大方塊來進行版面配置
5.2.C:利用vertical-align讓元素對齊水平線上方
5.2.D:利用float讓子元素漂浮在父元素上方
5.2.E:父元素加上overflow來解決子元素float後的排版問題
5.3.A:利用margin來讓方塊重疊的方式
5.3.B:透過z-index指定圖層的上下順序
5.3.C:透過vertical-align以及外層排版,定義三欄排版版型
5.3.D:使用postion為relative修改子元素的相對位置
5.3.E:使用postion為absolute修改子元素的絕對位置
5.3.F:使用postion為fixed增加固定在瀏覽器上面的元件
5.4.A:進一步了解overflow的屬性值意義
5.4.B:圓形大頭貼的處理方案
5.4.C:透過visibility隱藏答案
第六堂課的上課練習
例題 6.1.A 色彩漸層的初體驗
例題 6.1.B 圓形的彩虹漸層處理
例題 6.2.A 寧夏的歌詞 (三張底圖的處理方式)
例題 6.2.B 底圖的填滿效果 (contain vs. cover)
例題 6.2.C 影像透明度的使用 opacity 的處理
例題 6.3.A 方塊內圖片上面疊上文字說明的統一格式處理
例題 6.4.A 多重圖示的轉動濟橋加上萬用字源的呼叫使用
例題 6.4.B 圖示的重疊畫面展示 (五個圖示重疊)
例題 6.5.A 以漸層方式取代直接變化的 transition 功能
例題 6.6.A 以動畫方式讓滑鼠特效變成一值變動的畫面
例題 6.6.B 以動畫方式讓企鵝一直旋轉旋轉
例題 6.6.C 讓底圖的蜜蜂飛
例題 6.6.D 讓動畫持續輪轉
第七堂課的上課練習
例題 7.1.A 使用清單來設計導覽列的方法
例題 7.1.B 修改導覽列加入active的樣板
例題 7.1.C 修改導覽列,讓按鈕間沒有框線
例題 7.2.A 讓導覽列擁有第二層選單功能
例題 7.2.B 讓導覽列第二層選單可以具有滑動特效
例題 7.3.A 讓圖片可以具有超連結的點選功能
例題 7.4.B 使用Balsamiq Markup快速建置網站示意圖
例題 7.5.A 以HTML 5的新標籤處理整體網站的風格樣式
css的相關資料