您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 Code iProcess 课程 角色 咨询 工具 火云堂 讲座吧   建模者  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
 
     
   
 订阅
  捐助
实战HTML5与CSS3 下篇
 
作者:叶小钗 来源:博客园 发布于: 2015-05-08
1268 次浏览     评价:      
 

前言

昨天的进度有点延缓,只做了快速导航特效,都是晚上回来一点多才基本结束,其中很多问题也没有修正,就只有一个白板特效。

今天是假日的最后一天,所以需要有一个结果了,看来这次只能做首页了,乐观情况下需要把整个首页布局弄出来,再优化了。

回顾特效,为什么absolute

我们回顾下之前的几个特效,无论是导航上跟着走的背景,还是爆炸的图片,到昨天做的快速导航特效,他们全是采用绝对定位!

然后来看看我们马上要做的新闻列表:

注意他点击翻页后整个新闻列表是有翻滚特效的,我刚刚看了下新闻dom结构与样式,不错,他也是绝对定位的!

我们这里其实可以简单分析下原因:

因为绝对定位的元素脱离了文档流,我们对他们的操作(动画)只会影响相关元素,而不会导致整个页面的回流,从而提高页面性能。

所以具有复杂特效的dom结构,最好还是使用绝对定位。

新闻列表

好了,我们继续今天的任务,我们先使用本地数据库导入一定数据,在完成新闻列表的特效,说干就干,先本地数据库,这里就只输入标题就好了。

PS:我本来想采用本地数据库的,却发现连ff都不支持,所以算了吧,我们自己出效果就好了。。。。

我们先来看看他的dom结构:

<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特效实现的,我这里就不模拟了,看看自己可以怎么实现呢?

<!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 .box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 50px 100px;}
14 .box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; }
15 .box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }
16 .box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }
17 .box .h .pre{ background-position: -513px -29px;}
18 .box .h .next{ background-position: -526px -29px;}
19
20
21 .box .c { background: #DEE1E7 url("images/news_bg.png");
22 color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}
23 .box .c a { color: #474747; }
24 .box .c a:hover { color: Black; text-decoration: underline; }
25 .box .list span { float: right;}
26
27
28 </style>
29 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
30 <script type="text/javascript">
31 $(document).ready(function () {
32
33
34 });
35
36 </script>
37 </head>
38 <body>
39 <div id="news" class="box">
40 <div class="h">
41 <h3>
42 新闻中心<span>News center</span></h3>
43 <a class="next" title="下一页" href="javascript:;"></a> <a class="pre" title="上一页" href="javascript:;"></a>
44 </div>
45 <div class="c">
46 <ul class="list">
47 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html"> [公告]关于2月2日公开课案例bug修复</a>
48 <span>2013-03-24</span> </li>
49 <li><a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html"> 3月16日 第二次YY公开课已提供下载</a>
50 <span>2013-03-24</span> </li>
51 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html"> 智能社 第二次YY公开课</a>
52 <span>2013-03-24</span> </li>
53 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html"> 智能社乔迁新址</a> <span>
54 2013-03-24</span> </li>
55 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html"> 不会JavaScript能混前端么?</a>
56 <span>2013-03-24</span> </li>
57 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html"> [2月3日YY公开课视频已提供下载</a>
58 <span>2013-03-24</span> </li>
59 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html"> 论坛开放邀请注册了哦</a>
60 <span>2013-03-24</span> </li>
61 </ul>
62 </div>
63 </div>
64
65 </body>
66 </html>

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

他整个结构是很清晰的,其中class h单独出来了,是为了有可能会出现的选项卡相关。现在我们来看看分页的效果如何实现呢?

经过测试,我发现他们那种做法是有道理的,所以我决定模仿之。。。。。所以代码改变了下下:

<!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 .box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 50px 100px;}
14 .box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; }
15 .box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }
16 .box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }
17 .box .h .pre{ background-position: -513px -29px;}
18 .box .h .next{ background-position: -526px -29px;}
19
20 .box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}
21 .box .c a { color: #474747; }
22 .box .c a:hover { color: Black; text-decoration: underline; }
23 .box .list { position: absolute; width: 306px; }
24 .box .list span { float: right;}
25 .box .list li { position: relative; height: 24px; line-height: 24px; overflow: hidden; z-index: 10; }
26
27 .box .list li div{ top: 0; position: absolute; z-index: 2; width: 100%; transition: top 0.3s linear; }
28
29
30 </style>
31 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
32 <script type="text/javascript">
33 $(document).ready(function () {
34 var next = $('#next');
35 var pre = $('#pre');
36
37 var next_data = [
38 '[公告]关于2月2日公开课案例bug修复001',
39 'js视频下载第四波来啦',
40 'JS课程2013年开班信息',
41 '新的JS课程页面更新',
42 'JS视频教程免费第四波 欢迎观看~',
43 'js视频下载第三波来啦',
44 '2月3日YY公开课视频已提供下载'
45 ];
46 next.click(function () {
47 //此处代码有点恶心。。。
48 $('.list li div').each(function (i) {
49 var el = $(this);
50 setTimeout(function () {
51 el.append($('<br/><a href="javascript:;">' + next_data[i] + '</a><span>2013-03-24</span>'));
52 el.css('top', '-24px');
53 }, 150 * i);
54 });
55 });
56 pre.click(function () {
57 //此处代码有点恶心。。。
58 $('.list li div').each(function (i) {
59 var el = $(this);
60 setTimeout(function () {
61 el.css('top', '0');
62 }, 150 * i);
63 });
64 });
65
66 });
67
68 </script>
69 </head>
70 <body>
71 <div id="news" class="box">
72 <div class="h">
73 <h3>
74 新闻中心<span>News center</span></h3>
75 <a class="next" id="next" title="下一页" href="javascript:;"></a> <a class="pre" id="pre" title="上一页" href="javascript:;"></a>
76 </div>
77 <div class="c">
78 <ul class="list">
79 <li>
80 <div>
81 <a target="_blank" href="http://www.zhinengshe.com/news/26.html"> [公告]关于2月2日公开课案例bug修复</a>
82 <span>2013-03-24</span>
83 </div>
84 </li>
85 <li>
86 <div>
87 <a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公开课已提供下载</a>
88 <span>2013-03-24</span>
89 </div>
90 </li>
91 <li>
92 <div>
93 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公开课</a>
94 <span>2013-03-24</span>
95 </div>
96 </li>
97 <li>
98 <div>
99 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社乔迁新址</a> <span>2013-03-24</span>
100 </div>
101 </li>
102 <li>
103 <div>
104 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">不会JavaScript能混前端么?</a>
105 <span>2013-03-24</span>
106 </div>
107 </li>
108 <li>
109 <div>
110 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公开课视频已提供下载</a>
111 <span>2013-03-24</span>
112 </div>
113 </li>
114 <li>
115 <div>
116<a target="_blank" href="http://www.zhinengshe.com/news/26.html">论坛开放邀请注册了哦</a>
117 <span>2013-03-24</span>
118 </div>
119 </li>
120 </ul>
121 </div>
122 </div>
123 124 </body>
125 </html>

 

这个特效效果基本与原版一致了,因为其中li是绝对布局,所以动画亦不会引起页面重排,所以效率上应该不会有太大影响,值得一提的是,这里采用css引起的动画哦。

整体布局

经过这两天学习,主要完成了导航特效,图片flash特效,快速导航特效以及今天的新闻列表翻页特效。

其它功能便暂时搁浅了,我这里来整体布局,将他们揉到一起看看什么效果!

最终实现布局。

结语

至此首页功能基本结束,这次美其名曰HTML5+CSS3的网站设计,但是做到后面发现又和平时干的事情差不多了。。。。

此事令人困惑啊,要真正走上HTML5+CSS3的道路看来还有很长一段路要走!!!

此次不足

1 功能不全,本来打算把整个网站都实现了的,但中间耽搁了一天,加之其它原因这里就只实现80%的首页效果此系列便暂时结束吧

2 效果不足,这里做的东西只能以粗制滥造形容!!!里面的代码全部没有优化,有些地方可以用更优雅的实现,但这里也没有去思考,完全机械式的工作结束了!!!

而且与原网站相比而言,我这个首页就是渣渣。。。。。

3 性能不好,毫无疑问,以上的性能会有问题,因为有很多的动画,所以卡。。。。

后期计划

此次结束就算了,后面会在工作中切切实实的研究下HTML5和CSS3,希望以后写的东西能更有价值!!!

   
1268 次浏览  评价: 差  订阅 捐助
 
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
 
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
 
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
 

十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   

设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南

东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...   
 
 
 
 
 
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号