這次我做的是一個簡單的web版的一個簡單的qq登錄頁面。
不過在此之前，我想分享一下自己剛學(xué)到的一個小tip，很多同學(xué)很想摳網(wǎng)站上的原圖，但一般情況下都難以實現(xiàn)，如果直接鼠標(biāo)右鍵點擊然后另存為的話，存下來的一般是該網(wǎng)頁的html。
正確的步驟應(yīng)該是這樣的：
首先請打開谷歌瀏覽器（其他瀏覽器不敢保證），然后任意位置點擊鼠標(biāo)右鍵，再點擊審查元素
將會出現(xiàn)這樣一個界面，在這里面就可以看到該網(wǎng)頁的css、html、前端代碼、網(wǎng)頁里的圖片等 ? ? ? ? ? ? ? ? ? ? ?
然后看到最上方最右邊有一個“resources”，點擊“resources”：
會出現(xiàn)一個frames的文件夾，點擊該文件夾，下方就會出現(xiàn)images這一欄目，點擊images:
然后這就是該網(wǎng)頁里面所有出現(xiàn)過的圖片了，直接雙擊，會跳轉(zhuǎn)到另一個html，然后再這個html里面，就可以直接右鍵另存為了，如果沒有反應(yīng)，重復(fù)上述操作在做一遍即可。
那現(xiàn)在進(jìn)入正題吧。
首先，先看下這次做出來是個什么樣子的。
大概就是這樣子的，一打開首先選中在QQ賬號這一頁面，左邊是三種不同的賬號注冊方式，下面是QQ賬號的搜索欄。右邊就是各個頁面的具體交互了。
這次的這個交互有三個地方給我造成了一定的困難，所以我就著重說說這三個地方。
●左邊三個不同頁面的切換以及切換前后圖標(biāo)顏色的變化。
●右邊交互界面輸入框顏色的變化以及焦點位置的變化。
●如何保持多個下拉列表框中具有聯(lián)系的內(nèi)容的對應(yīng)性。
一：左邊三個不同頁面的切換以及切換前后圖標(biāo)顏色的變化。
首先，先說三個頁面的不同切換。
這里最方便最高效的方法應(yīng)該是用動態(tài)面板去做。
每個分頁面直接放到動態(tài)面板的幾個不同的狀態(tài)里，然后添加動作，選中切換時點擊的圖標(biāo)以及圖標(biāo)旁邊的小圖片，然后再設(shè)置動態(tài)面板狀態(tài)，使當(dāng)前按鈕與所對應(yīng)的頁面相一致：
然后接下來的就是隨著頁面的切換左邊三個圖標(biāo)的顏色也隨之改變。
這個時候就需要用到圖片屬性里面的選中按鈕了，點擊選中，在image一欄導(dǎo)入在切換時你想要變換的圖片：
這樣就可以，在不被選中時還是原來的圖片，在選中時就會顯示你所導(dǎo)入的圖片。
二：右邊交互界面輸入框顏色的變化以及焦點位置的變化。
其實這個輸入框是由兩部分組成：一個矩形和一個文本框
想要達(dá)到點擊時獲取焦點并且外邊框變成藍(lán)色，離開時外邊框變成紅色的效果，首先，在外邊框?qū)傩詸诶镌O(shè)置選中時和禁用時的變化效果，選中時外邊框設(shè)置成紅色，禁用時設(shè)置成藍(lán)色：
然后接下來就可以直接添加動作了，鼠標(biāo)單擊時：外邊框禁用（顏色變藍(lán)），顯示輸入框（因為輸入框的顏色和矩形有所不同，避免色差，所以先隱藏起來了），輸入框獲取焦點；然后再設(shè)置輸入框動作：獲取到焦點時，設(shè)置未選中外邊框，然后禁用外邊框（從而真正達(dá)到變藍(lán)效果），失去焦點時，啟用并選中外邊框，外邊框變紅。好了，這樣一系列動作就完成了。
三：如何保持多個下拉列表框中具有聯(lián)系的內(nèi)容的對應(yīng)性。
就拿后面兩個下拉列表，即：省市和轄區(qū)為例。
如何做到一一對應(yīng)呢，當(dāng)然，我們可以對省市進(jìn)行一一判斷，如果省市是北京，那么調(diào)整轄區(qū)所在的動態(tài)面板（轄區(qū)需要設(shè)置動態(tài)面板），使北京對應(yīng)到相應(yīng)的動態(tài)面板的狀態(tài)中去，但是一旦數(shù)據(jù)量大了，這樣做會非常麻煩，要錄入的東西太多。
所以得換一種方法。
直接設(shè)置動態(tài)面板（轄區(qū)）的狀態(tài)，選擇狀態(tài)為value，設(shè)置一個局部變量，然后把省市的數(shù)據(jù)賦值給該局部變量，然后再把動態(tài)面板狀態(tài)給定到該局部變量：
然后它就可以自動匹配不同下拉列表里面有對應(yīng)關(guān)系的數(shù)據(jù)了。
