在學(xué)習(xí)了十幾天的html知識里面，我們跟著江哥講授的視頻做了一些小練習(xí)小項目，在這其中我覺得受益匪淺，并且在制作這些小練習(xí)小項目的時候，帶給了我困難和經(jīng)驗。下面我就來說說幾個給我印象深刻的項目練習(xí)。

首先這是一個比較常見的注冊列表的頁面，在這個頁面里面運用了好多input標(biāo)簽的使用，有幾個要注意的是 例如密碼是用password屬性這樣密碼就會不會被看到。還有單選復(fù)選框，2個框都需要設(shè)置一個默認(rèn)值，還有name的屬性必須是一致的。然后個人介紹的文本框可以設(shè)置每行每列的文字，最后是下面2個按鈕也可以改名字。

然后是這個百度首頁的練習(xí)。這個練習(xí)要注意的地方是有很多a標(biāo)簽的使用和設(shè)置。還有要開始劃分3個大的區(qū)域來分別完成他們。然后是內(nèi)容換行排列的地方比較多。

這個背景圖的定位和設(shè)置的屬性就要注意一下，特比是嵌套里面的小圖片的寬高，不能放了圖片直接定位。還有就是fireworker的使用。

在這個網(wǎng)易注冊的頁面里面，除了分開3大區(qū)域分別制作以外，我覺得最困難的就是制作中間這個注冊的頁面，因為里面要利用比較多的浮動還有小細(xì)節(jié)，例如3個切換界面就要用ulli來制作，還有小紅星也是要為他添加一個span標(biāo)簽來改變他的顏色。

這是一個過渡動畫的基本界面，剛開始學(xué)習(xí)這個的時候我覺得突然有難度了，加的內(nèi)容有點多，雖然看上去簡單的2個動畫效果，但是運用到了動畫的時間分區(qū)0%~100%，還有旋轉(zhuǎn)的屬性。

這是利用了動畫效果的新的知識點，就是當(dāng)ul被鼠標(biāo)hold住的時候文字會散開，這個知識點后面運用的挺多的。

這是一個動畫效果，要注意的是設(shè)置動畫向左運動的，就是負(fù)值，然后3個云層移動的距離也是不一樣的，才有分層效果出現(xiàn)。

這也是一個無限循環(huán)的廣告的效果，里面有4個不同的圖片。要注意的是鼠標(biāo)停留的時候，其他板塊會暗色下來，然后要頭尾設(shè)置2個一樣的圖片，這樣就會打一個視覺差做到無限循環(huán)滾動的樣子。

這也是一個無限滾動的廣告，不過這個要設(shè)置一個3d屬性，還有記得是設(shè)置perspective來達到近大遠(yuǎn)小的效果，還有這個圖片的旋轉(zhuǎn)頁面要每一個90度旋轉(zhuǎn)設(shè)置了正面的每個面，再設(shè)置2邊，才能達到每個面看到的畫面都是正的效果。

這是一個模仿張學(xué)友的海報的效果。這里注意的地方也是比較多，一個是6面照片旋轉(zhuǎn)動畫設(shè)置時，要加上rotateX的角度 才可以看到6個面。還有透明度的顏色是跟隨父元素的背景顏色來決定的。最后是若隱若現(xiàn)的那個圖片要每段設(shè)置透明度從1~0 然后又0~1。

以上這幾個例子都是我學(xué)習(xí)過程中覺得比較需要注意和留意的例子，看上去簡單，但是你忽略了一些小細(xì)節(jié)可能達不到你想要的效果。css設(shè)置也是要比較謹(jǐn)慎的。在未來的學(xué)習(xí)里面也是一樣。

學(xué)HTML5就選李南江，選培訓(xùn)機構(gòu)我只選小碼哥（www.520it.com）