目录
【实战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吧，我就不管了。
在最新浏览器下叛变结束:
初步排版结束
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 #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
20 #fast_nav .list { padding: 26px 0 0 36px; position: absolute; }
21 #fast_nav h3{ margin: 0 0 22px 32px; font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;}
22 #fast_nav .list li{ line-height: 22px;}
23 #fast_nav01 { left: 0; top: 0; }
24 #fast_nav02 { left: 300px; top: 0; }
25 #fast_nav03 { left: 0; top: 185px; }
26 #fast_nav04 { left: 300px; top: 185px; }
27 #fast_nav02 h3{ margin-right: 46px; text-align: right; }
28 #fast_nav03 h3{ margin: 26px 0 0 44px;}
29 #fast_nav04 h3{ margin: 26px -40px 0 0; text-align: right; }
30
31 </style>
32 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
33 <script type="text/javascript">
34 $(document).ready(function () {
35
36 });
37
38 </script>
39 </head>
40 <body>
41 <div id="fast_nav">
42 <div id="fast_nav_bt">
43 fast_nav
44 </div>
45 <div id="fast_nav_close">
46 <div class="nav_x">
47 x
48 </div>
49 <div class="nav_y">
50 y
51 </div>
52 </div>
53 <div id="fast_nav01" class="list">
54 <h3 class="fastCom_title_l">
55 近期开班信息</h3>
56 <ul>
57 <li>JS周末班 2012年10月13日开班 [已开班]</li><li>JS全日制 2012年10月19日开班 <a
58 href="contact.html">[咨询]</a></li><li>HTML5周末班 2012年10月21日开班 <a href="contact.html">[咨询]</a></li><li>
59 JS周末班 2012年11月17日开班 <a href="contact.html">[咨询]</a></li></ul>
60 </div>
61 <div id="fast_nav02" class="list">
62 <h3 class="fastCom_title_r">
63 最新留言</h3>
64 <ul>
65 <li><a href="message.html">老师 这个留言板分页 鼠标移动上去 就...</a></li><li><a href="message.html">
66 看到16集里说会开远程教学，不知道是不...</a></li><li><a href="message.html">这个站做的真的很牛逼呀，貌似后台都是...</a></li><li>
67 <a href="message.html">现在有没有能加上的Q群啊blue老湿</a></li></ul>
68 </div>
69 <div id="fast_nav03" class="list">
70 <ul>
71 <li><a href="js02_desc.html#zns_zt_content">JS课程包括哪些内容？</a></li><li><a href="html5_01_desc.html#zns_zt_content">
72 HTML5课程包括哪些内容？</a></li><li><