CSS樣式特效演示文件修改版

第五章 CSS樣式特效 回顧 詳述getElementById( )的主要功能 詳述getElementsByName( )的主要功能 簡述制作浮動廣告圖片的實現思路 簡述制作全選/反選多個復選框的實現思路 預習檢查 樣式規則的語法是什么？用法有哪些 onMouseOver與onMouseOut的區別 inline 、block與none屬性分別起什么作用 本章任務 本章目標 會使用style樣式屬性動態改變邊框顏色 會使用className類名屬性動態改變按鈕背景圖片 會使用display顯示屬性實現層或圖片的隱藏/顯示和切換特效 回顧已學的CSS樣式表-1 樣式規則的語法是什么？用法有哪些？ 回顧已學的CSS樣式表-2-1 回顧HTML中講過的CSS樣式表，常見的樣式有哪些？ 回顧已學的CSS樣式表-2-2 回顧已學的CSS樣式表-2-3 制作改變字體大小的樣式特效 實現思路 1、創建改變樣式的JavaScript代碼 this.style.fontSize='24px' this.style.fontSize='14px‘ 2、利用鼠標相關事件調用JavaScript代碼 onMouseOver="this.style.fontSize='24px'“ onMouseOut="this.style.fontSize='14px'" 小結 1 請編寫如下圖所示，實現隨鼠標移入改變邊框色的效果 制作改變按鈕背景圖片的特效-1 如何實現如下圖所示 ，按鈕的圖片背景效果？ 制作改變按鈕背景圖片的特效-2 制作改變按鈕背景圖片的特效-3 制作改變按鈕背景圖片的特效-4 小結 2 編寫如下圖所示，鼠標移入改變按鈕背景圖片的特效 層的顯示/隱藏特效-1 顯示屬性display 層的顯示/隱藏特效-3 層的顯示/隱藏特效-4 小結 3 編寫如下圖所示，層的顯示隱藏特效 圖片的顯示/隱藏特效-1 如何實現如下圖所示的圖片切換特效？ 如何獲取圖片Img對象？ 圖片的顯示/隱藏特效-2 圖片的顯示/隱藏特效-3 小結 4 編寫如下圖所示，圖片的顯示隱藏特效 總結 請列舉常用的樣式屬性？ 請簡述樣式特效的實現思路？ 請回答如何改變按鈕背景圖片的特效？ 請簡述層的顯示/隱藏與圖片的顯示/隱藏特效的異同？ * 演示示例2：頁面效果 演示示例1：頁面效果 演示示例3：頁面效果 制作51job的彈出層效果 制作”點卡“圖片切換的特效 制作改變邊框樣式、按鈕圖片樣式的特效 演示示例4：行內樣式 演示示例5：內嵌樣式 演示示例6：外部樣式表 常見 樣式 文本屬 性樣式 背景屬 性樣式 不帶下劃 線的超連 接樣式 細邊 框樣式 圖片按 鈕樣式 文本對齊 text-align 設置或檢索文本的顏色 color 字體樣式 font-style 字體類型 font-family 字體大小 font-size 說 明 文本屬性 設置一個指定的圖像如何被重復 background-repeat 設置背景圖像 background-image 設置背景顏色 background-color 說 明 背景屬性 .boxBorder { border-width:1px; border-style:solid; } 細邊框樣式 A { color: blue; text-decoration: none;} A:hover{ color: red; } 不帶下劃線的超連接 .picButton{ background-image: url(images/back2.jpg); border: 0px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; } 圖片按鈕樣式 說 明 名稱 使用了style屬性 樣式表：font-size 腳本代碼：fontSize 演示示例7：改變字號大小的樣式特效 練習代碼 練習答案 鼠標移入邊框顏色變為紅色 鼠標移入按鈕背景變色 演示示例8：改變樣式backgroundImage演示 演示：通過改變樣式backImage能否實現？ onMouseOver="this.style.backgroundImage='url(images/back2.jpg)';" 失敗的原因：當鼠標移到按鈕上方時，除了圖片要換以外，還應保留 border、margin、 padding等樣式。即使用多行代碼 onmouseO

總結

以上是生活随笔為你收集整理的css特效文件,CSS样式特效演示文件修改版.ppt的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。