在學(xué)習(xí)了十幾天的html知識(shí)里面，我們跟著江哥講授的視頻做了一些小練習(xí)小項(xiàng)目，在這其中我覺得受益匪淺张肾，并且在制作這些小練習(xí)小項(xiàng)目的時(shí)候，帶給了我困難和經(jīng)驗(yàn)锚扎。下面我就來說說幾個(gè)給我印象深刻的項(xiàng)目練習(xí)捌浩。
首先這是一個(gè)比較常見的注冊(cè)列表的頁面，在這個(gè)頁面里面運(yùn)用了好多input標(biāo)簽的使用工秩，有幾個(gè)要注意的是 例如密碼是用password屬性這樣密碼就會(huì)不會(huì)被看到尸饺。還有單選復(fù)選框，2個(gè)框都需要設(shè)置一個(gè)默認(rèn)值助币，還有name的屬性必須是一致的浪听。然后個(gè)人介紹的文本框可以設(shè)置每行每列的文字，最后是下面2個(gè)按鈕也可以改名字眉菱。
然后是這個(gè)百度首頁的練習(xí)迹栓。這個(gè)練習(xí)要注意的地方是有很多a標(biāo)簽的使用和設(shè)置。還有要開始劃分3個(gè)大的區(qū)域來分別完成他們俭缓。然后是內(nèi)容換行排列的地方比較多克伊。
這個(gè)背景圖的定位和設(shè)置的屬性就要注意一下，特比是嵌套里面的小圖片的寬高华坦，不能放了圖片直接定位愿吹。還有就是fireworker的使用。
在這個(gè)網(wǎng)易注冊(cè)的頁面里面惜姐，除了分開3大區(qū)域分別制作以外犁跪，我覺得最困難的就是制作中間這個(gè)注冊(cè)的頁面，因?yàn)槔锩嬉帽容^多的浮動(dòng)還有小細(xì)節(jié)歹袁，例如3個(gè)切換界面就要用ulli來制作坷衍，還有小紅星也是要為他添加一個(gè)span標(biāo)簽來改變他的顏色。
這是一個(gè)過渡動(dòng)畫的基本界面条舔，剛開始學(xué)習(xí)這個(gè)的時(shí)候我覺得突然有難度了枫耳，加的內(nèi)容有點(diǎn)多，雖然看上去簡單的2個(gè)動(dòng)畫效果孟抗，但是運(yùn)用到了動(dòng)畫的時(shí)間分區(qū)0%~100%迁杨，還有旋轉(zhuǎn)的屬性。
這是利用了動(dòng)畫效果的新的知識(shí)點(diǎn)夸浅，就是當(dāng)ul被鼠標(biāo)hold住的時(shí)候文字會(huì)散開仑最，這個(gè)知識(shí)點(diǎn)后面運(yùn)用的挺多的扔役。
這是一個(gè)動(dòng)畫效果帆喇，要注意的是設(shè)置動(dòng)畫向左運(yùn)動(dòng)的，就是負(fù)值亿胸，然后3個(gè)云層移動(dòng)的距離也是不一樣的坯钦，才有分層效果出現(xiàn)预皇。
這也是一個(gè)無限循環(huán)的廣告的效果，里面有4個(gè)不同的圖片婉刀。要注意的是鼠標(biāo)停留的時(shí)候吟温，其他板塊會(huì)暗色下來，然后要頭尾設(shè)置2個(gè)一樣的圖片突颊，這樣就會(huì)打一個(gè)視覺差做到無限循環(huán)滾動(dòng)的樣子鲁豪。
這也是一個(gè)無限滾動(dòng)的廣告，不過這個(gè)要設(shè)置一個(gè)3d屬性律秃，還有記得是設(shè)置perspective來達(dá)到近大遠(yuǎn)小的效果爬橡，還有這個(gè)圖片的旋轉(zhuǎn)頁面要每一個(gè)90度旋轉(zhuǎn)設(shè)置了正面的每個(gè)面，再設(shè)置2邊棒动，才能達(dá)到每個(gè)面看到的畫面都是正的效果糙申。
這是一個(gè)模仿張學(xué)友的海報(bào)的效果。這里注意的地方也是比較多船惨，一個(gè)是6面照片旋轉(zhuǎn)動(dòng)畫設(shè)置時(shí)柜裸，要加上rotateX的角度 才可以看到6個(gè)面。還有透明度的顏色是跟隨父元素的背景顏色來決定的粱锐。最后是若隱若現(xiàn)的那個(gè)圖片要每段設(shè)置透明度從1~0 然后又0~1疙挺。
以上這幾個(gè)例子都是我學(xué)習(xí)過程中覺得比較需要注意和留意的例子，看上去簡單怜浅，但是你忽略了一些小細(xì)節(jié)可能達(dá)不到你想要的效果衔统。css設(shè)置也是要比較謹(jǐn)慎的。在未來的學(xué)習(xí)里面也是一樣海雪。
學(xué)HTML5就選李南江锦爵，選培訓(xùn)機(jī)構(gòu)我只選小碼哥（www.520it.com）
