进来看看，1分钟用HTML5实现的雪花效果——HTML5实例001
有客官提到不知道如何入手学习`<canvas>`这个标签的事，我恰好想到了自己曾经为了学习这东西写了一个天生像素风格头像的网页，大略明了，来日诰日禀享出来。
还有客官说自己加了音乐，为你点赞，学习编程便是要自己不断地去摸索，去考试测验。提到了多浏览器的兼容，这个兼容，只假如写过前端代码的兄弟，提多了都是泪。如果想快速出效果的话，实在可以找个第三方专门播放音频的库，比较省心。
好了，连续昨天没有实现完成的部分，有了雪花效果，接下来只要把两个图片放到页面上面，再加个倒计时就ok了。
1, 首先在`index.html`里面加入两个图片，再将例计时要用到的几个`<span>`标签也加上：
<body> <div class=\"大众content\"大众> <img src=\"大众001.png\"大众 /> <h2>间隔己亥年春节还有</h2> <p> <span id=\"大众days\"大众> </span>天<span id=\公众hours\公众> </span>小时<span id=\"大众minutes\"大众> </span>分<span id=\"大众seconds\"大众> </span>秒 </p> </div> <div class=\"大众sider\"大众> <img src=\"大众002.png\"大众 /> </div> <canvas></canvas>
用两个div将两块内容包起来，稍后让他们旁边浮动。
可能有客官把稳到那几个`<span>`的分行有点不对劲，这里这样子分行实在是为了防止在同一行的`span`标签之间在源代码中的分行（回车）会被浏览器阐明成为空格。 看一张图就明白了：
Todo
当然有别的方法可以办理这个问题，不过我比较喜好大略直接，以前写代码也是老念叨“能用就好啦，要什么自行车”，“拿着鞋带扎一下就好了“，哈哈，这种态度怎么说呢，有好的地方，便是你不用太过拘泥于小细节，小问题，或者是大家说的代码优雅，专心去第一韶光看到自己想看到的东西出来。不好的地方便是，有人可能会在帮你修理”不太友好“的代码的时候踩到坑里。
2, `javascript`的倒计时功能，在js文件夹里面新建一个`countdown.js`文件，代码如下：
function CountDown(future_date,eventname) { this.future_date = Date.parse(future_date); this.eventname = eventname;}; CountDown.prototype.remaining = function () { var current = \"大众Today is \公众 + this.eventname + \公众!\公众; var today = Date.now(); var msInDay = 6060100024; var msInHour = 60601000; var msInMin = 601000; var diff = this.future_date - today; var dday = Math.floor(diff / msInDay); var dhour = Math.floor((diff % msInDay) / msInHour 1); var dmin = Math.floor(((diff % msInDay) % msInHour)/msInMin 1); var dsec = Math.floor((((diff % msInDay) % msInHour) % msInMin) / 1000 1); if(dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 1) { console.log(current) return false; } else { return { seconds: dsec, minutes: dmin, hours: dhour, days: dday } }; }var countdown_refresh = function () { if(!current_countdown.remaining()) { clearInterval(countdownLoader); } else { document.getElementById('days').innerHTML = current_countdown.remaining().days; document.getElementById('hours').innerHTML = current_countdown.remaining().hours; document.getElementById('minutes').innerHTML = current_countdown.remaining().minutes; document.getElementById('seconds').innerHTML = current_countdown.remaining().seconds; } };var countdownLoader = window.setInterval(countdown_refresh,1000);var current_countdown = new CountDown(\公众2019-2-5\"大众, \"大众my 30th birthday!\公众);
以上代码有很大的优化空间，留给有心的客官提出吧。现在，只须要的是能用就好啦。不出错的话，现在网页上面的倒计时已经可以看到效果了：
将网页背景改成赤色的了，比较喜庆一些
3, 可以看到，`<canvas>`被挤到了下面，以是得把放图片的两个div给浮动起来，打开`css/style.css`进行编辑（代码意图就直接写在注释里面吧）：
/设置网页的背景为赤色/html{ background: radial-gradient( circle at 20% 50%, #ff1700, #a01808 );}/让canvas固定，前后旁边高下定位到与页面（窗口）一样大小/canvas {position: fixed;top: 0;left: 0;right: 0;bottom: 0;}/修正div里面内容的字体，颜色，大小；改变div的显示模式为行内块，放便后面旁边浮动/div { font-family: '新蒂小丸子体', cursive; color: white; text-shadow: 1px 1px 0 #ccccccb8, 1px -2px 0 #ff1700d1, 4px 4px 2px #ea323294; display:inline-block; font-size: 1.5em; font-weight: bolder;}/将图片的宽度改为300px，/img { width: 300px; }/ 将有倒计时的div往右浮动，设置一个与右边图片相同的高度，让内部内容往下偏移97px/div.content { height: 600px; width: 300px; float: left; padding-top: 97px;}/跨年两个字往右边移动/div.sider { float: right;}/设置body的宽度，并且整体居中/body { width: 600.111111px; margin: 0 auto;}
效果：
恩，便是这样了
末了，再放一张图，看，当网页的宽度不敷720px的时候，会自动变一种布局，如何实现？后面会更新讲解，还宴客长收藏，转发，关注。
CSS3相应布局
