目錄
【實戰HTML5與CSS3 第一篇】初探水深，美麗的導航，絢麗的圖檔爆炸！！
【實戰HTML5與CSS3 第二篇】絢麗的快速導航！
【實戰HTML5與CSS3 第三篇】我第一個HTML5網頁誕生了(提供源碼)
前言
今天9點就起來了，因為下午出去有個聚會，是以就早點起來進行，否則這個進度有點吃緊啊，昨天初略的完成了導航以及爆炸的圖檔，這裡來回顧下：
1 導航為一個div背景跟着導航欄目移動，并有一定抖動感覺，這個完全是jquery的東西了，若是用css3我暫時沒有想到解決方案；
2 圖檔爆炸功能，這個功能就現在來說都是有很多問題的，都不能用瑕疵來說，第一效果不能達到我的要求，第二性能上恐怕有問題，這塊也亟待優化。
但是，昨天糾結爆炸這塊糾結了4、5個小時，若是現在再耗時間，恐怕這次計劃就落空了，是以先以進度為要吧。
絢麗的快速導航
我們來看看他這個快速導航幹了些什麼？
我們看到他這個效做的十分絢麗的：
點選快速導航後，整個圖示跑到了中心位置，然後裡面的菜單再從幾個方向蹦出來，點選關閉後又還原了，真是令人動容的使用者感受啊！
那我們來看看該如何實作呢？ 用jquery我想應該是可以實作的，但是我這裡想試試CSS3可否完成我的要求，于是我們一起動手吧。
做的過程中我就不完全照着他的方法來了吧，加一點點自己的小創意：那個關閉按鈕我們用CSS3來做！
基本結構如下：
複制代碼
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input
{ border: 0 none; margin: 0; padding: 0; }
7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000;
font-family: '新宋體' , '宋體' ,Verdana; font-size: 12px; color: #EEEEEE; }
8
9 ul, ol { list-style-type: none; }
10 select, input, img { outline: medium none; vertical-align: middle; }
11 a { text-decoration: none; outline: medium none; }
12
13 #fast_nav { width: 606px; height: 376px; background: url("images/fast_nav_open.png") no-repeat; position: relative;
top: 50px; left: 100px; }
14 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute;
right: -8px; top: -8px; }
15 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -999px; width: 0; height: 0;
border: 1px solid white; transform: rotate(45deg); cursor: pointer; }
16 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; }
17 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; }
18 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -999px;
position: absolute; left: 267px; top: 152px;}
19 </style>
20 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
21 <script type="text/javascript">
22 $(document).ready(function () {
23
24 });
25
26 </script>
27 </head>
28 <body>
29 <div id="fast_nav">
30 <div id="fast_nav_bt">fast_nav
31 </div>
32 <div id="fast_nav_close">
33 <div class="nav_x">x
34 </div>
35 <div class="nav_y">y
36 </div>
37 </div>
38 <div id="fast_nav01">
39 </div>
40 <div id="fast_nav02">
41 </div>
42 <div id="fast_nav03">
43 </div>
44 <div id="fast_nav04">
45 </div>
46 </div>
47 </body>
48 </html>
大家看看右上角的關閉按鈕，這就是我的小花樣！而且在其它浏覽器上估計會失效。。。但是當做鞏固css3吧，我就不管了。
在最新浏覽器下叛變結束:
初步排版結束
好了，我們繼續，現在是css控制顯示相關的代碼：
css控制開關
點選展開，再次點選關閉，這裡有個優化點，我判斷的時候是檢視dom是否包含class，這個應該放到記憶體，而不是dom，後面點優化。現在我們看看動畫效果如何實作。
很戳的效果
css很戳的效果
這個效果很難看的，完全不是我所希望的，而且點選快速導航會有一定抖動效果，這個可能又要用jquery實作了。。。
這裡還有個問題就是，裡面的文字被擠壓，變得非常難看，整個使用者體驗很差，這塊還要繼續了。
完整代碼
到此功能代碼大概完成，隻剩下優化部分需要處理了。
結語
今天的任務沒能完成，本來計劃的是先做這個快遞導航特效，然後再做一點本地資料庫的東西，然後就差最後的排版了。
誰知道，快速導航這塊工作量還不少，花了不少時間，加之今天5.1出去聚會了，到現在才回來，是以這篇文章有點粗制濫造了。
對于本功能，開始想的是使用css3動畫效果，但是他的特效很強大，css3恐怕有點吃力，是以這裡就用了jquery的動畫效果了，
但是，你知道jquery的效率的，代碼上的特效運作幾次後就這個樣子了：
很燒CPU的，是以這塊功能還需要優化。
觀察這兩天的工作量，明天估計最樂觀就是把首頁完成了。。。
本文轉自葉小钗部落格園部落格，原文連結http://www.cnblogs.com/yexiaochai/archive/2013/05/01/3051632.html，如需轉載請自行聯系原作者
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)