推薦：純html5+css3下拉導(dǎo)航菜單實現(xiàn)代碼
下拉導(dǎo)航在瀏覽網(wǎng)頁時經(jīng)常會遇見到，記得以前都是使用js實現(xiàn)的吧，不過本文接下來要介紹的是采用css3+html5實現(xiàn)，感興趣的你可不要錯過了哈，希望看完對你學(xué)習(xí)css3有所幫助

前面已經(jīng)總結(jié)了主要的API擴(kuò)展，下面幾個擴(kuò)展只有在專用的場合才會發(fā)揮最大的作用，這里簡單了解一下。下面這些特性無一例外，IE均不支持。應(yīng)用緩存和服務(wù)端消息在其他的主流瀏覽器中都是支持的。桌面通知目前只有Chrome支持。
應(yīng)用緩存
很多時候，我們需要緩存一些不經(jīng)常改變的頁面來提高訪問速度；而且對于某些應(yīng)用，我們也希望在離線的情況下也可以使用。在HTML5中，你可以通過一個稱之為“應(yīng)用緩存”的技術(shù)很方便的實現(xiàn)這些功能。
在應(yīng)用緩存的實現(xiàn)中，HTML5允許我們創(chuàng)建一個緩存manifest文件來方便的生成一個離線版的應(yīng)用。
實現(xiàn)步驟：
1. 啟用頁面的緩存，很簡單，只需要在document的html中包含manifest屬性：


每一個包含這個manifest屬性的頁面當(dāng)用戶訪問的時候都會被緩存。如果manifest屬性沒有指定的話，將不會緩存（除非網(wǎng)頁被直接在manifest文件中指定）。manifest文件擴(kuò)展名還沒有統(tǒng)一的標(biāo)準(zhǔn)，推薦的擴(kuò)展名是".appcache"。
2. 服務(wù)器端配置manifest文件的MIME類型
一個manifest文件需要被正確的MIME-type支持，這種文件類型為"text/cache-manifest"。必須在所使用的web服務(wù)器上進(jìn)行配置。例如：Apache 中可在 .htaccess 中添加： AddType text/cache-manifest manifest。
3.編寫manifest文件
manifest文件是一個簡單的文本文件，告訴了瀏覽器去緩存什么內(nèi)容（或者不緩存什么內(nèi)容）。
manifest文件包含下面三個部分：
• CACHE MANIFEST - 在這個列表標(biāo)題下的文件將會在下載后被緩存。
• NETWORK - 在這個列表標(biāo)題下的文件將要求連接到服務(wù)器，不會進(jìn)行緩存。
• FALLBACK - 在這個列表標(biāo)題下的文件如果不能訪問時，則顯示特定的頁面。
完整的一個文件如下面的例子所示：


提示：
#開頭的代表注釋。
*可以用表示所有的其它資源或者文件。例如：


表示所有的資源或者文件都不會緩存。
4.更新緩存
一旦一個應(yīng)用被緩存，它將保持緩存除非一下情況發(fā)生：
• 用戶刪除了緩存
• manifest文件被修改
• 應(yīng)用緩存被程序修改
所以一旦文件被緩存，除了人為的修改情況，瀏覽器將會持續(xù)的顯示緩存版本內(nèi)容，即使你修改了服務(wù)器文件。為了讓瀏覽器更新緩存，你只能去修改manifest文件。
：以"#"開始的行是注釋行，但是可以有其它用處。如果你的修改只涉及到一個圖片或者javascript功能，那些變化是不會被重新緩存的。在注釋中更新日期和版本是讓瀏覽器重新緩存你的文件的一個方法
：瀏覽器可以有很多不同大小限制的緩存數(shù)據(jù)（有些瀏覽器允許5M的緩存數(shù)據(jù)）。




2.服務(wù)器端的發(fā)送消息代碼
服務(wù)器端的發(fā)送更新消息很簡單：設(shè)置content-type頭信息為”text/event-stream"后，你就可以發(fā)送事件。以ASP代碼為例：


3.瀏覽器端的接收消息代碼


代碼說明：
• 創(chuàng)建一個EventSource對象，指定發(fā)送更新的頁面URL （這里是demo_see.jsp）
• 每一次一個更新接收后，onmessage事件就觸發(fā)
• 當(dāng)onmessage時間觸發(fā)，將得到的數(shù)據(jù)設(shè)置到id="result"的元素中
EventSource對象除了onmessage事件外，還有處理錯誤的onerror事件，連接建立的onopen事件等。
桌面通知 - 準(zhǔn)HTML5特性
桌面通知功能能夠讓瀏覽器即使是最小化狀態(tài)也能將消息通知給用戶。這和WebIM是最為天然的結(jié)合。不過，目前支持該特性的瀏覽器只有Chrome。彈窗是大家深惡痛絕的東西，所以開啟這項特性需要得到用戶的許可。


瀏覽器中打開此頁面，就會看到桌面的右下角彈出一個持續(xù)5秒鐘的消息窗口。
這項特性使用起來很簡單，但是在實際操作的過程中，應(yīng)該盡量減少通知功能對用戶的干擾，最大程度的減少通知功能的出現(xiàn)。
下面是網(wǎng)上高手做這個應(yīng)用的一些經(jīng)驗：
1. 收到多條消息時確保只出現(xiàn)一條通知;
這個問題比較好解決，因為通知對象擁有一個名為"replaceId"的屬性。指定該屬性后，只要是相同replaceId的通知窗口彈出，都會覆蓋之前彈出的窗口。在實際項目中是給所有的彈出窗口賦了一個相同的replaceId。不過需要注意的是，這種覆蓋行為只在同域下有效。
2. 當(dāng)用戶處于IM出現(xiàn)的頁面中時(頁面處于Focus狀態(tài))將不出現(xiàn)通知;
這個問題主要是在于判斷瀏覽器窗口是否處于Focus狀態(tài)，目前除了監(jiān)聽window的onfocus和onblur事件之外，貌似沒有更好的方式。在項目中就是通過這種方式來記錄窗口的Focus狀態(tài)，然后當(dāng)消息到達(dá)時根據(jù)Focus狀態(tài)來判斷是否彈出窗口。


使用該方法需要注意的地方是，事件注冊的事件點(diǎn)應(yīng)該盡可能的靠前，如果注冊太晚則當(dāng)用戶打開頁面后再離開就會很容易出現(xiàn)狀態(tài)的誤判。
3. 當(dāng)用戶使用多Tab開啟多個存在IM的頁面時，只要有一個頁面處于Focus狀態(tài)將不出現(xiàn)通知;
多頁面間的狀態(tài)共享可以通過本地存儲來實現(xiàn)：
• 瀏覽器窗口Focus時修改本地存儲中指定key的值為"focus"
• 瀏覽器窗口Blur時修改本地存儲中指定key的值為"blur"。
需要注意的是，Chrome下從一個Tab切換到另一個Tab時，Blur有可能比Focus后寫入存儲中，因此修改Focus狀態(tài)時需要異步處理。


實現(xiàn)以上狀態(tài)共享后，新的消息到達(dá)后，只需要查看本地存儲中’kxchat_focus_win_state’的值是否為blur，如果為blur才彈出窗口。
4. 如何讓用戶點(diǎn)擊通知浮動層即可定位到具體的聊天窗口
通知窗口支持onclick等事件響應(yīng)，而響應(yīng)函數(shù)中的作用范圍屬于創(chuàng)建該窗口的頁面。如下代碼：


在onclick的響應(yīng)函數(shù)中訪問的window對象即屬于當(dāng)前創(chuàng)建頁面，因此可以很方便的與當(dāng)前頁面進(jìn)行交互。以上代碼便實現(xiàn)了點(diǎn)擊彈出窗口會跳轉(zhuǎn)到對應(yīng)的瀏覽器窗口和打開IM窗口。
：頁面中的相關(guān)事件很多時候具有不確定的時序性，所以我們的代碼盡量不要假設(shè)某些事件觸發(fā)的順序是一定的。比如上面的blur和focus事件

實用參考：
官方文檔：http://www.w3schools.com/html5/
html5的一個中文教程：http://www.gbin1.com/tutorials/html5-tutorial/

分享：html5+css3實現(xiàn)一款注冊表單實例
注冊表單采用html5+css3布局實現(xiàn)，效果相當(dāng)不錯，感興趣的前端web設(shè)計者可以參考下哈，希望可以幫助到你