簡介:本課程為CSS3教程,對(duì)于有一定CSS2經(jīng)驗(yàn)的伙伴,能讓您系統(tǒng)的學(xué)習(xí)CSS3,快速的理解掌握并應(yīng)用于工作之中。在學(xué)習(xí)教程的過程中實(shí)例演示結(jié)合在線編程完成任務(wù)的方式來學(xué)習(xí),相信自己動(dòng)手會(huì)讓你理解的更快,本教程能夠讓您學(xué)習(xí)效果更好!
第1章 初識(shí)CSS3
CSS3課程列出第一站,先帶領(lǐng)大家進(jìn)入CSS3的世界,探索CSS3的魅力!你做好準(zhǔn)備了嗎?
第2章 邊框
本課程主要講解border-color 、border-image 、border-radius 及box-shadow 相關(guān)知識(shí)
第3章 顏色相關(guān)
學(xué)習(xí)CSS3中與顏色有關(guān)的屬性,包括RGBA colors和Gradient,來實(shí)現(xiàn)在此之前只能通過其它手段如背景圖片才能得到的絢麗效果。
第4章 文字與字體
本章學(xué)習(xí)CSS3中文字相關(guān)的屬性,包括text-shadow、text-overflow和嵌入字體等,通過CSS來實(shí)現(xiàn)多變的網(wǎng)頁字體效果。
第5章 與背景相關(guān)的樣式
講解與背景相關(guān)的新增屬性。background-origin background-clip background-size multiple backgrounds
第6章 征服CSS3選擇器(上)
靈活運(yùn)用強(qiáng)大的CSS3選擇器,學(xué)會(huì)選擇器的使用,可以直接將樣式與元素綁定起來,之前我們需要使用JavaScrip實(shí)現(xiàn)的功能,現(xiàn)在只需要用CSS3就能輕松搞定。
- 編程: 6-1 CSS3選擇器 屬性選擇器
- 編程: 6-2 CSS3 結(jié)構(gòu)性偽類選擇器—root
- 編程: 6-3 CSS3 結(jié)構(gòu)性偽類選擇器—not
- 編程: 6-4 CSS3 結(jié)構(gòu)性偽類選擇器—empty
- 編程: 6-5 CSS3 結(jié)構(gòu)性偽類選擇器—target
- 編程: 6-6 CSS3 結(jié)構(gòu)性偽類選擇器—first-child
- 編程: 6-7 CSS3 結(jié)構(gòu)性偽類選擇器—last-child
- 編程: 6-8 CSS3 結(jié)構(gòu)性偽類選擇器—nth-child(n)
- 編程: 6-9 CSS3 結(jié)構(gòu)性偽類選擇器—nth-last-child(n)
- 編程: 6-10 CSS3 first-of-type選擇器
- 編程: 6-11 CSS3 nth-of-type(n)選擇器
- 編程: 6-12 CSS3 last-of-type選擇器
- 編程: 6-13 CSS3 nth-last-of-type(n)選擇器
- 編程: 6-14 CSS3 only-child選擇器
- 編程: 6-15 CSS3 only-of-type選擇器
第7章 征服CSS3選擇器(下)
UI元素狀態(tài)偽類選擇器也是CSS3選擇器模塊組中的一部分,此類選擇器主要運(yùn)用于form表單元素上,用來提高網(wǎng)頁的人機(jī)交互、操作邏輯以及頁面的整體美觀。
第8章 CSS3中的變形與動(dòng)畫(上)
徹底分清 Transform 、Transition、 Animations 三兄弟
- 編程: 8-1 CSS3變形--旋轉(zhuǎn) rotate()
- 編程: 8-2 CSS3中的變形--扭曲 skew()
- 編程: 8-3 CSS3中的變形--縮放 scale()
- 編程: 8-4 CSS3中的變形--位移 translate()
- 編程: 8-5 CSS3中的變形--矩陣 matrix()
- 編程: 8-6 CSS3中的變形--原點(diǎn) transform-origin
- 編程: 8-7 CSS3中的動(dòng)畫--過渡屬性 transition-property
- 編程: 8-8 CSS3中的動(dòng)畫--過渡所需時(shí)間 transition-duration
- 編程: 8-9 CSS3中的動(dòng)畫--過渡函數(shù) transition-timing-function
- 編程: 8-10 CSS3中的動(dòng)畫--過渡延遲時(shí)間 transition-delay
第9章 CSS3中的變形與動(dòng)畫(下)
animation實(shí)現(xiàn)動(dòng)畫效果主要由兩個(gè)部分組成:首先通過類似Flash動(dòng)畫中的關(guān)鍵幀來聲明一個(gè)動(dòng)畫,然后在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫,從而實(shí)現(xiàn)一個(gè)更為復(fù)雜的動(dòng)畫效果。
- 編程: 9-1 CSS3 Keyframes介紹
- 編程: 9-2 CSS3中調(diào)用動(dòng)畫
- 編程: 9-3 CSS3中設(shè)置動(dòng)畫播放時(shí)間
- 編程: 9-4 CSS3中設(shè)置動(dòng)畫播放方式
- 編程: 9-5 CSS3中設(shè)置動(dòng)畫開始播放的時(shí)間
- 編程: 9-6 CSS3中設(shè)置動(dòng)畫播放次數(shù)
- 編程: 9-7 CSS3中設(shè)置動(dòng)畫播放方向
- 編程: 9-8 CSS3中設(shè)置動(dòng)畫的播放狀態(tài)
- 編程: 9-9 CSS3中設(shè)置動(dòng)畫時(shí)間外屬性
- 編程: 9-10 制作3D旋轉(zhuǎn)導(dǎo)航綜合練習(xí)題
第10章 布局樣式相關(guān)
多欄布局、盒布局、盒模型
第11章 Media Queries 與Responsive 設(shè)計(jì)
傳說中的響應(yīng)式設(shè)計(jì),根據(jù)瀏覽器的窗口大小選擇使用不同的樣式。
第12章 用戶界面與其它重要屬性
輪廓相關(guān)樣式、resize屬性、initial屬性