开发者社区> 范大脚脚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

实战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,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端开发:HTML知识总结——网页结构
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形,动画,声音,表格,链接等。
28 0
前端静态页面html5样式设置css页面渲染
前端静态页面html5样式设置css页面渲染
49 0
HTML5实践 -- 如何使用css创建三角形,使用CSS3创建3d四面体
  今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。原文地址:http://www.paulrhayes.com/2010-10/css-tetrahedron/。
1064 0
HTML5实践 -- 使用CSS 实现弹性视频
  转载请注明原文地址:http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html     当我编码Elemin Theme(我最近设计的一个响应式的站点)的时候,我遇到的一个跳帧就是,如何能让嵌入式的视频在尺寸变化上变得更加灵活。
1077 0
HTML5实践 -- 使用css装饰你的图片画廊 - part2
  转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html     在上一讲中,我们的解决方案使用到了jquery去创建一个span标签。
1119 0
HTML5实践 -- 使用css装饰你的图片画廊
  转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html     本节课我们将介绍,如何使用css在不修改图片源的前提下装饰你的图片画廊。
1047 0
HTML5实践 -- 使用css制作时间 ICON
  最近我在重新设计自己的博客站点,决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片,感谢css3,现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。
978 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
《企业全面上云成功路径与实践》
立即下载
FLINK在大规模实时无效广告流量检测中的应用
立即下载