目录

【实战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