实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)

简介： 目录
【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！
【实战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特效实现的，我这里就不模拟了，看看自己可以怎么实现呢？
基础样式与结构

原网站都是采用背景图的方式，我这里用了一点css3的东西给形成了这种结构，我们来看看我们这个dom结构：


他整个结构是很清晰的，其中class h单独出来了，是为了有可能会出现的选项卡相关。现在我们来看看分页的效果如何实现呢？
经过测试，我发现他们那种做法是有道理的，所以我决定模仿之。。。。。所以代码改变了下下：
效果实现

这个特效效果基本与原版一致了，因为其中li是绝对布局，所以动画亦不会引起页面重排，所以效率上应该不会有太大影响，值得一提的是，这里采用css引起的动画哦。
整体布局
经过这两天学习，主要完成了导航特效，图片flash特效，快速导航特效以及今天的新闻列表翻页特效。
其它功能便暂时搁浅了，我这里来整体布局，将他们揉到一起看看什么效果！
完整页面代码

最终实现布局。
结语
至此首页功能基本结束，这次美其名曰HTML5+CSS3的网站设计，但是做到后面发现又和平时干的事情差不多了。。。。
此事令人困惑啊，要真正走上HTML5+CSS3的道路看来还有很长一段路要走！！！
此次不足
1 功能不全，本来打算把整个网站都实现了的，但中间耽搁了一天，加之其它原因这里就只实现80%的首页效果此系列便暂时结束吧
2 效果不足，这里做的东西只能以粗制滥造形容！！！里面的代码全部没有优化，有些地方可以用更优雅的实现，但这里也没有去思考，完全机械式的工作结束了！！！
而且与原网站相比而言，我这个首页就是渣渣。。。。。
3 性能不好，毫无疑问，以上的性能会有问题，因为有很多的动画，所以卡。。。。
 
后期计划
此次结束就算了，后面会在工作中切切实实的研究下HTML5和CSS3，希望以后写的东西能更有价值！！！
最后我提供阶段性下载地址吧，希望各位与我一起研究：
文件下载：
http://files.cnblogs.com/yexiaochai/html5css3.zip
有什么问题请各位讨论，初次做这种东西有点水，请各位见谅。
最后如果你觉得这篇文章还不错，请帮忙点击一下推荐，谢谢！
 
您可以考虑给小钗发个小额微信红包以资鼓励  上海-B站招聘靠谱前端（3年左右工作经验），喜欢二次元的小伙伴私聊！ 分类: HTML5&CSS3




本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/05/01/3052782.html，如需转载请自行联系原作者