目錄
【實戰HTML5與CSS3 第一篇】初探水深，美麗的導航，絢麗的圖片爆炸！！
【實戰HTML5與CSS3 第三篇】我第一個HTML5網頁誕生了(提供源碼)
前言
昨天的進度有點延緩，只做了快速導航特效，都是晚上回來一點多才基本結束，其中很多問題也沒有修正，就只有一個白板特效。
今天是假日的最后一天，所以需要有一個結果了，看來這次只能做首頁了，樂觀情況下需要把整個首頁布局弄出來，再優化了。
回顧特效，為什么absolute
我們回顧下之前的幾個特效，無論是導航上跟着走的背景，還是爆炸的圖片，到昨天做的快速導航特效，他們全是采用絕對定位！
然后來看看我們馬上要做的新聞列表：
注意他點擊翻頁后整個新聞列表是有翻滾特效的，我剛剛看了下新聞dom結構與樣式，不錯，他也是絕對定位的！
我們這里其實可以簡單分析下原因：
因為絕對定位的元素脫離了文檔流，我們對他們的操作（動畫）只會影響相關元素，而不會導致整個頁面的回流，從而提高頁面性能。
所以具有復雜特效的dom結構，最好還是使用絕對定位。
新聞列表
好了，我們繼續今天的任務，我們先使用本地數據庫導入一定數據，在完成新聞列表的特效，說干就干，先本地數據庫，這里就只輸入標題就好了。
PS：我本來想采用本地數據庫的，卻發現連ff都不支持，所以算了吧，我們自己出效果就好了。。。。
我們先來看看他的dom結構：
1 <li> 2 <div> 3 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]關於2月2日公開課案例bug修復</a><span>2013-03-24</span><br> 4 <a href="#"></a><span></span> 5 </div> 6 <em></em></li>
他這個實現我們可以看一看，他點擊翻頁后，其實是將新數據填充到下面的a標簽和span里面，然后對div進行向上平移，li overflow:hidden，
也是以jquery特效實現的，我這里就不模擬了，看看自己可以怎么實現呢？
基礎樣式與結構
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; color: White; } 12 13 .box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 50px 100px;} 14 .box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; } 15 .box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; } 16 .box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; } 17 .box .h .pre{ background-position: -513px -29px;} 18 .box .h .next{ background-position: -526px -29px;} 19 20 21 22 .box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;} 23 .box .c a { color: #474747; } 24 .box .c a:hover { color: Black; text-decoration: underline; } 25 .box .list span { float: right;} 26 27 28 </style> 29 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 30 <script type="text/javascript"> 31 $(document).ready(function () { 32 33 34 }); 35 36 </script> 37 </head> 38 <body> 39 <div id="news" class="box"> 40 <div class="h"> 41 <h3> 42 新聞中心<span>News center</span></h3> 43 <a class="next" title="下一頁" href="javascript:;"></a><a class="pre" title="上一頁" href="javascript:;"></a> 44 </div> 45 <div class="c"> 46 <ul class="list"> 47 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]關於2月2日公開課案例bug修復</a> 48 <span>2013-03-24</span> </li> 49 <li><a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公開課已提供下載</a> 50 <span>2013-03-24</span> </li> 51 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公開課</a> 52 <span>2013-03-24</span> </li> 53 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社喬遷新址</a> <span> 54 2013-03-24</span> </li> 55 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">不會JavaScript能混前端么？</a> 56 <span>2013-03-24</span> </li> 57 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公開課視頻已提供下載</a> 58 <span>2013-03-24</span> </li> 59 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">論壇開放邀請注冊了哦</a> 60 <span>2013-03-24</span> </li> 61 </ul> 62 </div> 63 </div> 64 65 </body> 66 </html>
原網站都是采用背景圖的方式，我這里用了一點css3的東西給形成了這種結構，我們來看看我們這個dom結構：
他整個結構是很清晰的，其中class h單獨出來了，是為了有可能會出現的選項卡相關。現在我們來看看分頁的效果如何實現呢？
經過測試，我發現他們那種做法是有道理的，所以我決定模仿之。。。。。所以代碼改變了下下：
效果實現
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; color: White; } 12 13 .box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 50px 100px;} 14 .box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; } 15 .box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; } 16 .box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; } 17 .box .h .pre{ background-position: -513px -29px;} 18 .box .h .next{ background-position: -526px -29px;} 19 20 .box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;} 21 .box .c a { color: #474747; } 22 .box .c a:hover { color: Black; text-decoration: underline; } 23 .box .list { position: absolute; width: 306px; } 24 .box .list span { float: right;} 25 .box .list li { position: relative; height: 24px; line-height: 24px; overflow: hidden; z-index: 10; } 26 27 .box .list li div{ top: 0; position: absolute; z-index: 2; width: 100%; transition: top 0.3s linear; } 28 29 30 </style> 31 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 32 <script type="text/javascript"> 33 $(document).ready(function () { 34 var next = $('#next'); 35 var pre = $('#pre'); 36 37 var next_data = [ 38 '[公告]關於2月2日公開課案例bug修復001', 39 'js視頻下載第四波來啦', 40 'JS課程2013年開班信息', 41 '新的JS課程頁面更新', 42 'JS視頻教程免費第四波 歡迎觀看~', 43 'js視頻下載第三波來啦', 44 '2月3日YY公開課視頻已提供下載' 45 ]; 46 next.click(function () { 47 //此處代碼有點惡心。。。 48 $('.list li div').each(function (i) { 49 var el = $(this); 50 setTimeout(function () { 51 el.append($('<br/><a href="javascript:;">' + next_data[i] + '</a><span>2013-03-24</span>')); 52 el.css('top', '-24px'); 53 }, 150 * i); 54 }); 55 }); 56 pre.click(function () { 57 //此處代碼有點惡心。。。 58 $('.list li div').each(function (i) { 59 var el = $(this); 60 setTimeout(function () { 61 el.css('top', '0'); 62 }, 150 * i); 63 }); 64 }); 65 66 }); 67 68 </script> 69 </head> 70 <body> 71 <div id="news" class="box"> 72 <div class="h"> 73 <h3> 74 新聞中心<span>News center</span></h3> 75 <a class="next" id="next" title="下一頁" href="javascript:;"></a><a class="pre" id="pre" title="上一頁" href="javascript:;"></a> 76 </div> 77 <div class="c"> 78 <ul class="list"> 79 <li> 80 <div> 81 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]關於2月2日公開課案例bug修復</a> 82 <span>2013-03-24</span> 83 </div> 84 </li> 85 <li> 86 <div> 87 <a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公開課已提供下載</a> 88 <span>2013-03-24</span> 89 </div> 90 </li> 91 <li> 92 <div> 93 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公開課</a> 94 <span>2013-03-24</span> 95 </div> 96 </li> 97 <li> 98 <div> 99 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社喬遷新址</a> <span>2013-03-24</span> 100 </div> 101 </li> 102 <li> 103 <div> 104 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">不會JavaScript能混前端么？</a> 105 <span>2013-03-24</span> 106 </div> 107 </li> 108 <li> 109 <div> 110 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公開課視頻已提供下載</a> 111 <span>2013-03-24</span> 112 </div> 113 </li> 114 <li> 115 <div> 116 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">論壇開放邀請注冊了哦</a> 117 <span>2013-03-24</span> 118 </div> 119 </li> 120 </ul> 121 </div> 122 </div> 123 124 </body> 125 </html>
這個特效效果基本與原版一致了，因為其中li是絕對布局，所以動畫亦不會引起頁面重排，所以效率上應該不會有太大影響，值得一提的是，這里采用css引起的動畫哦。
整體布局
經過這兩天學習，主要完成了導航特效，圖片flash特效，快速導航特效以及今天的新聞列表翻頁特效。
其它功能便暫時擱淺了，我這里來整體布局，將他們揉到一起看看什么效果！
完整頁面代碼
1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <style type="text/css"> 7 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; } 8 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋體' , '宋體' ,Verdana; font-size: 12px; color: #EEEEEE; overflow-y: scroll; overflow-x: hidden;} 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; color: White; } 12 13 /*導航相關 begin*/ 14 .nav_c { width: 1000px; margin: 40px auto 0; } 15 .logo { float: left; margin-top: -20px; } 16 .nav { width: 720px; background: url("images/navBg.png") no-repeat; height: 77px; padding-left: 40px; position: relative; z-index: 10; right: 0; margin-left: 265px; } 17 .nav div { position: absolute; background: url("images/navA_hover.png") no-repeat; width: 116px; height: 78px; text-indent: -9999px; top: -2px; z-index: -10; } 18 .nav ul { } 19 .nav ul li { display: inline-block; line-height: 60px; height: 77px; width: 106px; text-align: center; margin: 0 2px; } 20 .nav ul li a { font-size: 14px; color: White; text-shadow: 1px 1px 1px #000000; font-family: Verdana; } 21 .nav ul li a:hover { color: #63B1FF; text-shadow: 1px 1px 1px #000000; } 22 .nav ul li span { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 1px 1px 0 #000000; height: 14px; margin: 24px -8px 0 0; overflow: hidden; vertical-align: top; width: 1px; float: right; } 23 /*導航相關 end*/ 24 25 /*header begin*/ 26 .header { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); height: 26px; line-height: 26px; box-shadow: 1px 2px 10px #000000; } 27 .header .main{ width: 990px; margin: 0 auto;} 28 .header h3 { font-size: 12px; font-weight: normal; color: #CDCDCD; float: left; width: 700px; } 29 .header .tool_bar{ float: right;} 30 .header .tool_bar a{ color: White; color: #CDCDCD; } 31 /*header end*/ 32 33 /*flash img begin*/ 34 #flash { background: url("images/slideBg.png") no-repeat; width: 1010px; height: 385px; position: relative; margin: 10px auto; } 35 .outer { background: url("pic/1.png") no-repeat; width: 840px; height: 306px; position: relative; transition: background-image 10s linear; border-radius: 10px; top: 32px; left: 84px; } 36 .outer div { background: url("pic/1.png"); width: 134px; height: 153px; position: absolute; transition: transform 0.5s linear; text-indent: -9999px; } 37 38 .bt { display: inline-block; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 41px; height: 42px; text-indent: -9999px; position: absolute; opacity: 0.5; transition: opacity 1s linear; } 39 #pre { background-position: -274px -43px; top: 160px; left: 20px; } 40 #next { background-position: -315px -43px; top: 160px; right: 20px; } 41 #pre:hover { background-position: -273px 0; opacity: 1; } 42 #next:hover { background-position: -314px 0; opacity: 1; } 43 #pager { position: absolute; bottom: 14px; right: 100px; } 44 #pager a { display: inline-block; width: 24px; height: 24px; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; opacity: 0.5; transition: opacity 1s linear; background-position: -143px -1px; text-indent: -9999px; } #pager .sec { opacity: 1; background-position: -119px -1px;} 45 #pager a:hover { opacity: 1; background-position: -119px -1px; } 46 47 /*flash img end*/ 48 49 /*快速導航 begin*/ 50 .fast_nav { width: 72px; height: 72px; position: fixed; top: 50px; right: 30px; transition: right 0.2s linear, top 0.2s linear;} 51 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; right: -8px; top: -8px; z-index: 700; display: none; } 52 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -9999px; width: 0; height: 0; border: 1px solid white; transform: rotate(45deg); cursor: pointer; } 53 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; } 54 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; } 55 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -9999px; position: absolute; cursor: pointer; z-index: 500; } 56 57 .fast_nav .list { width: 0; height: 0; position: absolute; background: url("images/fast_nav_open.png") no-repeat; display: none; } 58 .fast_nav h3{font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;} 59 .fast_nav .list li{ line-height: 22px; overflow: hidden; min-width: 260px; } 60 #fast_nav01 { right: 303px; top: 188px; background-position: 0 0; height: 0; z-index: 400; } 61 #fast_nav02 { background-position: -303px 0; z-index: 399; } 62 #fast_nav03 { background-position: 0 -186px; z-index: 377; } 63 #fast_nav04 { background-position: -303px -186px; z-index: 388; } 64 65 #fast_nav01 ul{ margin-left: 54px;} 66 #fast_nav02 ul{ margin-left: 54px;} 67 #fast_nav03 ul{ margin-left: 54px; margin-top: 30px;} 68 #fast_nav04 ul{ margin-left: 54px; margin-top: 30px;} 69 70 #fast_nav01 h3{ margin: 26px 0 26px 66px;} 71 #fast_nav02 h3{ margin: 26px 0 26px 150px} 72 #fast_nav03 h3{ margin: 26px 0 0 76px;} 73 #fast_nav04 h3{ margin: 26px 86px 0 0; text-align: right; } 74 75 .fast_nav h3{ display: none; } 76 .fast_nav ul{ display: none; } 77 78 div.open { width: 606px; height: 376px; } 79 div.open h3 { display: block; } 80 div.open ul { display: block; } 81 div.open .list { width: 303px; height: 188px; } 82 div.open #fast_nav_bt { left: 267px; top: 152px; } 83 84 /*快速導航 end*/ 85 86 /*新聞列表 begin*/ 87 .box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 10px auto;} 88 .box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; } 89 .box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; } 90 .box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; } 91 .box .h .pre{ background-position: -513px -29px;} 92 .box .h .next{ background-position: -526px -29px;} 93 94 .box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;} 95 .box .c a { color: #474747; } 96 .box .c a:hover { color: Black; text-decoration: underline; } 97 .box .list { position: absolute; width: 306px; } 98 .box .list span { float: right;} 99 .box .list li { position: relative; height: 24px; line-height: 24px; overflow: hidden; z-index: 10; } 100 101 .box .list li div{ top: 0; position: absolute; z-index: 2; width: 100%; transition: top 0.3s linear; } 102 /*新聞列表 end*/ 103 104 .main { width: 1000px; margin: 10px auto 0;} 105 #main_r { float: right; width: 640px; } 106 #main_r li{ display: inline-block; text-align: center; margin: 0 12px; } 107 #main_r a { width: 100px; height: 100px; display: block; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; float: none; margin: 0 auto; } 108 #main_r .js { background-position: -111px -369px; } 109 #main_r .html { background-position: 0 -367px; } 110 #main_r .css { background-position: -220px -366px; } 111 112 </style> 113 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 114 <script type="text/javascript"> 115 $(document).ready(function () { 116 117 //導航相關 118 var div_hover = $('#nav_div'); 119 var nav = $('#nav'); 120 $('#nav ul').delegate('li', 'mouseenter', function (e) { 121 var el = $(this), 122 el_left = el.offset().left, 123 div_left = div_hover.offset().left; 124 time_step = 100; 125 var l = el_left - nav.offset().left; 126 div_hover.stop().animate({ left: l + 'px' }, time_step, function () { 127 if (el_left > div_left) { 128 div_hover.animate({ left: (l - 20) + 'px' }, time_step).animate({ left: l + 'px' }, time_step); 129 } else { 130 div_hover.animate({ left: (l + 20) + 'px' }, time_step).animate({ left: l + 'px' }, time_step); 131 } 132 }); 133 }); 134 135 //flash圖片相關 136 var index = 1; 137 var timer = null; 138 $('#outer div').each(function (i) { 139 var el = $(this); 140 var y = i > 5 ? 153 : 0, 141 x = i > 5 ? i - 6 : i; 142 el.css({ 'left': (x * 134) + 'px', 'top': y + 'px', 'background-position': (-1 * x * 134) + 'px ' + (-1 * y) + 'px' }); 143 var s = ''; 144 }); 145 function setFlash() { 146 if (timer) clearTimeout(timer); 147 $('#outer').css('background-image', 'url("pic/' + index + '.png")'); 148 $('#pager a').removeClass('sec'); 149 $('#pager .p' + index).addClass('sec'); 150 $('#outer div').each(function (i) { 151 var el = $(this); 152 var step = 200; 153 var x = 0, y = 0; 154 var regx = Math.round(Math.random() * 80); 155 var regy = Math.round(Math.random() * 80); 156 var r1 = Math.random() > 0.5 ? 1 : -1; 157 var r2 = Math.random() > 0.5 ? 1 : -1; 158 if (i < 3) { 159 x = -1 * step; 160 y = -1 * step; 161 } else if (i < 6) { 162 x = step; 163 y = -1 * step; 164 } else if (i < 9) { 165 x = -1 * step; 166 y = step; 167 } else { 168 x = step; 169 y = step; 170 } 171 x += r1 * Math.random() * step; 172 y += r2 * Math.random() * step; 173 el.css('transform', 'translate(' + x + 'px, ' + y + 'px) skew(' + regx + 'deg, ' + regy + 'deg)'); 174 // el.css('transform', 'rotate(360deg)'); 175 setTimeout(function () { 176 el.css('transform', ''); 177 el.css('background-image', 'url("pic/' + index + '.png")'); 178 }, 500); 179 }); 180 } 181 $('#pre').click(function () { 182 if (index == 1) index = 5; else index--; 183 setFlash(); 184 }); 185 $('#next').click(function () { 186 if (index == 5) index = 1; else index++; 187 setFlash(); 188 }); 189 $('#pager').delegate('a', 'click', function () { 190 var el = $(this); 191 var num = el.html(); 192 index = num; 193 setFlash(); 194 }); 195 var func = function () { 196 if (index == 5) index = 1; else index++; 197 setFlash(); 198 timer = setTimeout(func, 3000); 199 } 200 func(); 201 202 //快速導航 203 var step = 250; 204 // width: 606px; height: 376px; 205 // transition: width 1s linear, height 1s linear; 206 $('#fast_nav_bt').click(function () { 207 click_fast(); 208 }); 209 $('#fast_nav_close').click(function () { 210 click_fast(); 211 }); 212 213 function click_fast() { 214 if ($('#fast_nav').hasClass('open')) { 215 close_nav3(); 216 } else { 217 var r = (parseInt($(window).width()) / 2 - 303) + 'px'; 218 $('#fast_nav').css({ right: r, top: '100px' }); 219 open_fast(); 220 } 221 } 222 223 function open_fast() { 224 $('#fast_nav').addClass('open'); 225 setTimeout(open_nav1, step) 226 } 227 228 function open_nav1() { 229 $('#fast_nav01').css('width', '303px'); 230 $('#fast_nav01').show(); 231 $('#fast_nav01').animate({ height: '188px', top: '0' }, step, open_nav2); 232 } 233 function open_nav2() { 234 $('#fast_nav02').css({ 'left': '0', 'top': '0' }).show(); 235 $('#fast_nav02').animate({ left: '303px' }, step, open_nav4); 236 } 237 function open_nav3() { 238 $('#fast_nav03').css({ 'left': '303px', 'top': '188px' }).show(); 239 $('#fast_nav03').animate({ left: '0' }, step); 240 $('#fast_nav_close').show(); 241 } 242 function open_nav4() { 243 244 $('#fast_nav04').css({ 'left': '303px', 'top': '0' }).show(); 245 $('#fast_nav04').animate({ top: '188px' }, step, open_nav3); 246 } 247 248 // function close_fast() { 249 // $('#fast_nav_bt').animate({ left: '0', top: '0' }, step, close_nav3); 250 // } 251 function close_nav3() { 252 $('#fast_nav_close').hide(); 253 $('#fast_nav03').stop().animate({ left: '188px' }, step, close_nav4); 254 } 255 function close_nav4() { 256 $('#fast_nav03').hide(); 257 $('#fast_nav04').animate({ top: '0' }, step, close_nav2); 258 } 259 function close_nav2() { 260 $('#fast_nav04').hide(); 261 $('#fast_nav02').animate({ left: '0' }, step, close_nav1); 262 } 263 function close_nav1() { 264 $('#fast_nav02').hide(); 265 $('#fast_nav01').animate({ top: '188px', height: '0' }, step, function () { 266 $('#fast_nav01').css('width', '0'); 267 $('#fast_nav').removeClass('open'); 268 $('#fast_nav').css({ right: '30px', top: '50px' }); 269 // close_fast(); 270 }).hide(); 271 } 272 273 //新聞列表 274 var next = $('#list_next'); 275 var pre = $('#list_pre'); 276 277 var next_data = [ 278 '[公告]關於2月2日公開課案例bug修復001', 279 'js視頻下載第四波來啦', 280 'JS課程2013年開班信息', 281 '新的JS課程頁面更新', 282 'JS視頻教程免費第四波 歡迎觀看~', 283 'js視頻下載第三波來啦', 284 '2月3日YY公開課視頻已提供下載' 285 ]; 286 next.click(function () { 287 //此處代碼有點惡心。。。 288 $('.list li div').each(function (i) { 289 var el = $(this); 290 setTimeout(function () { 291 el.append($('<br/><a href="javascript:;">' + next_data[i] + '</a><span>2013-03-24</span>')); 292 el.css('top', '-24px'); 293 }, 150 * i); 294 }); 295 }); 296 pre.click(function () { 297 //此處代碼有點惡心。。。 298 $('.list li div').each(function (i) { 299 var el = $(this); 300 setTimeout(function () { 301 el.css('top', '0'); 302 }, 150 * i); 303 }); 304 }); 305 306 }); //ready 307 308 </script> 309 310 </head> 311 <body> 312 <header class="header"> 313 <div class="main"> 314 <h3> 315 智能社是一家專注於web前端開發技術的專業培訓機構，現推出“HTML5”、“JavaScript”和“HTML+CSS”三套課程</h3> 316 <div class="tool_bar"> 317 <a href="javascript:;">登陸</a> | <a href="javascript:;">關於我們</a></div> 318 </div> 319 </header> 320 <div class="nav_c"> 321 <h1 class="logo"> 322 <a href="http://www.zhinengshe.com/"> 323 <img alt="智能社——前端培訓專家" src="images/logo.png"></a> 324 </h1> 325 <nav class="nav" id="nav"> 326 <div id="nav_div"> 327 hover</div> 328 <ul> 329 <li><a href="javascript:;">首頁</a><span></span></li> 330 <li><a href="javascript:;">JS課程</a><span></span></li> 331 <li><a href="javascript:;">HTML5課程</a><span></span></li> 332 <li><a href="javascript:;">視頻課程</a><span></span></li> 333 <li><a href="javascript:;">課程案例</a><span></span></li> 334 <li><a href="javascript:;">聯系方式</a></li> 335 </ul> 336 </nav> 337 </div> 338 <div id="flash"> 339 <a id="pre" href="javascript:;" class="bt">pre</a> <a id="next" href="javascript:;" 340 class="bt">next</a> 341 <div id="pager"> 342 <a class="p1" href="javascript:;">1</a> <a class="p2" href="javascript:;">2</a> 343 <a class="p3" href="javascript:;">3</a> <a class="p4" href="javascript:;">4</a> 344 <a class="p5" href="javascript:;">5</a> 345 </div> 346 <div class="outer" id="outer"> 347 <div> 348 1</div> 349 <div> 350 2</div> 351 <div> 352 3</div> 353 <div> 354 4</div> 355 <div> 356 5</div> 357 <div> 358 6</div> 359 <div> 360 7</div> 361 <div> 362 8</div> 363 <div> 364 9</div> 365 <div> 366 10</div> 367 <div> 368 11</div> 369 <div> 370 12</div> 371 </div> 372 </div> 373 <div id="fast_nav" class="fast_nav"> 374 <div id="fast_nav_bt"> 375 fast_nav 376 </div> 377 <div id="fast_nav_close"> 378 <div class="nav_x"> 379 x 380 </div> 381 <div class="nav_y"> 382 y 383 </div> 384 </div> 385 <div id="fast_nav01" class="list"> 386 <h3 class="fastCom_title_l"> 387 近期開班信息</h3> 388 <ul> 389 <li>JS周末班 2012年10月13日開班 [已開班]</li><li>JS全日制 2012年10月19日開班 <a 390 href="contact.html">[咨詢]</a></li><li>HTML5周末班 2012年10月21日開班 <a href="contact.html">[咨詢]</a></li><li> 391 JS周末班 2012年11月17日開班 <a href="contact.html">[咨詢]</a></li></ul> 392 </div> 393 <div id="fast_nav02" class="list"> 394 <h3 class="fastCom_title_r"> 395 最新留言</h3> 396 <ul> 397 <li><a href="message.html">老師 這個留言板分頁 鼠標移動上去 就...</a></li><li><a href="message.html"> 398 看到16集里說會開遠程教學，不知道是不...</a></li><li><a href="message.html">這個站做的真的很牛逼呀，貌似后台都是...</a></li><li> 399 <a href="message.html">現在有沒有能加上的Q群啊blue老濕</a></li></ul> 400 </div> 401 <div id="fast_nav03" class="list"> 402 <ul> 403 <li><a href="js02_desc.html#zns_zt_content">JS課程包括哪些內容？</a></li><li><a href="html5_01_desc.html#zns_zt_content"> 404 HTML5課程包括哪些內容？</a></li><li><a href="js02_desc.html#zns_zt_content">課程收費是多少？</a></li><li> 405 <a href="contact.html">我想去學習，如何報名呢？</a></li></ul> 406 <h3 class="fastCom_title_l"> 407 常見問題</h3> 408 </div> 409 <div id="fast_nav04" class="list"> 410 <ul> 411 <li><a href="http://www.zhinengshe.com/news/4.html">積分系統上線</a></li><li><a href="http://www.zhinengshe.com/news/1.html"> 412 邀請碼系統開始公測</a></li><li><a href="http://zhinengshe.com/video.html">視頻教程，已更新到第31集</a></li><li> 413 <a href="http://zhinengshe.com/contact.html">智能社聯系方式</a></li></ul> 414 <h3 class="fastCom_title_r"> 415 綜合其他</h3> 416 </div> 417 </div> 418 <div class="main"> 419 <div id="news" class="box"> 420 <div class="h"> 421 <h3> 422 新聞中心<span>News center</span></h3> 423 <a class="next" id="list_next" title="下一頁" href="javascript:;"></a><a class="pre" 424 id="list_pre" title="上一頁" href="javascript:;"></a> 425 </div> 426 <div class="c"> 427 <ul class="list"> 428 <li> 429 <div> 430 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]關於2月2日公開課案例bug修復</a> 431 <span>2013-03-24</span> 432 </div> 433 </li> 434 <li> 435 <div> 436 <a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公開課已提供下載</a> 437 <span>2013-03-24</span> 438 </div> 439 </li> 440 <li> 441 <div> 442 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公開課</a> 443 <span>2013-03-24</span> 444 </div> 445 </li> 446 <li> 447 <div> 448 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社喬遷新址</a> <span>2013-03-24</span> 449 </div> 450 </li> 451 <li> 452 <div> 453 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">不會JavaScript能混前端么？</a> 454 <span>2013-03-24</span> 455 </div> 456 </li> 457 <li> 458 <div> 459 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公開課視頻已提供下載</a> 460 <span>2013-03-24</span> 461 </div> 462 </li> 463 <li> 464 <div> 465 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">論壇開放邀請注冊了哦</a> 466 <span>2013-03-24</span> 467 </div> 468 </li> 469 </ul> 470 </div> 471 </div> 472 <div id="main_r" class="box"> 473 <div class="h"> 474 <h3> 475 熱門課程<span>Hot course</span></h3> 476 </div> 477 <div class="c"> 478 <ul> 479 <li><a href="javascript:;" class="js"></a> 480 <div> 481 精通JavaScript 2.0課程</div> 482 <div> 483 (適合具備XHTML+CSS基礎的朋友)</div> 484 </li> 485 <li><a href="javascript:;" class="html"></a> 486 <div> 487 精通JavaScript 2.0課程</div> 488 <div> 489 (適合具備XHTML+CSS基礎的朋友)</div> 490 </li> 491 <li><a href="javascript:;" class="css"></a> 492 <div> 493 精通JavaScript 2.0課程</div> 494 <div> 495 (適合具備XHTML+CSS基礎的朋友)</div> 496 </li> 497 </ul> 498 </div> 499 </div> 500 </div> 501 </body> 502 </html>
最終實現布局。
結語
至此首頁功能基本結束，這次美其名曰HTML5+CSS3的網站設計，但是做到后面發現又和平時干的事情差不多了。。。。
此事令人困惑啊，要真正走上HTML5+CSS3的道路看來還有很長一段路要走！！！
此次不足
1 功能不全，本來打算把整個網站都實現了的，但中間耽擱了一天，加之其它原因這里就只實現80%的首頁效果此系列便暫時結束吧
2 效果不足，這里做的東西只能以粗制濫造形容！！！里面的代碼全部沒有優化，有些地方可以用更優雅的實現，但這里也沒有去思考，完全機械式的工作結束了！！！
而且與原網站相比而言，我這個首頁就是渣渣。。。。。
3 性能不好，毫無疑問，以上的性能會有問題，因為有很多的動畫，所以卡。。。。
后期計划
此次結束就算了，后面會在工作中切切實實的研究下HTML5和CSS3，希望以后寫的東西能更有價值！！！
最后我提供階段性下載地址吧，希望各位與我一起研究：
文件下載：
http://files.cnblogs.com/yexiaochai/html5css3.zip
有什么問題請各位討論，初次做這種東西有點水，請各位見諒。
最后如果你覺得這篇文章還不錯，請幫忙點擊一下推薦，謝謝！