仓酷云

标题: 来谈谈：CSS网页制造实例教程:十分酷的日期效果 [打印本页]

作者: 莫相离 时间: 2015-1-15 23:17
标题: 来谈谈：CSS网页制造实例教程:十分酷的日期效果
那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
破洛洛文章简介：LearningjQuery.com的博客日记上的日期效果十分的酷.
LearningjQuery.com的博客日记上的日期效果十分的酷，以下图：

个中笔墨的款式和垂直的年份就会告知你这不是用图片来完成的。并且在标志言语中日期信息是是以笔墨呈现的，就像一般的那样。

经由过程Firebug检察，代码十分简便大度！

很分明每个日期并没有各自的图片。它们都出自统一张图片（csssprites!），图片的分歧中央被安排上了分歧的内容：天、月和年。大概你会记得这和一年前JoostdeValkpostedabout上的手艺是一样的。
来看一下这张大度的图片：

HTML代码：
1<divclass="postdate">2<divclass="monthm-06">Jun</div>3<divclass="dayd-30">30</div>4<divclass="yeary-2009">2009</div>5</div>有一个内部包装和三个地区。我们就会晓得怎样组合这些部分：

在一个CMS（内容办理体系），比方wordpress中，面前的代码应当是如许：
1<divclass="postdate">2<divclass="monthm-<?phpthe_time(m)?>"><?phpthe_time(M)?></div>3<divclass="dayd-<?phpthe_time(d)?>"><?phpthe_time(d)?></div>4<divclass="yeary-<?phpthe_time(Y)?>"><?phpthe_time(Y)?></div>5</div>CSS代码
CSS才是精灵发扬感化的中央。使用我们已在HTML代码中设置的特别的类称号，我们能够设置利用图片的哪一部分。
起首，我们给父元素使用绝对地位定位。然后我们给个中的三个部分使用相对定位。我们让这三部分利用不异的图片（我们的精灵），设置它们各自的高度和宽度，再将笔墨移除出页面。
然后，我们设置每月（12种大概），每天（31种大概）和每年（设置了10年）利用背景图片的分歧地位。
01.postdate{position:relative;width:50px;height:50px;float:left;}02.month,.day,.year{position:absolute;text-indent:-1000em;background-image:url(/wp-content/themes/ljq/images/dates.png);background-repeat:no-repeat;}03.month{top:2px;left:0;width:32px;height:24px;}04.day{top:25px;left:0;width:32px;height:25px;}05.year{bottom:0;right:0;width:17px;height:48px;}06.m-01{background-position:04px;}07.m-02{background-position:0-28px;}08.m-03{background-position:0-57px;}09...morelikethis...10.d-01{background-position:-50px0;}11.d-02{background-position:-50px-31px;}12.d-03{background-position:-50px-62px;}13...morelikethis...14.y-2006{background-position:-150px0;}15.y-2007{background-position:-150px-50px;}16.y-2008{background-position:-150px-100px;}17...morelikethis...

但愿你能喜好！
原文：DateDisplayTechniquewithSprites
</p>
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。

作者: 活着的死人 时间: 2015-1-17 21:35
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 飘飘悠悠 时间: 2015-1-31 07:37
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 灵魂腐蚀 时间: 2015-2-6 18:30
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 再见西城 时间: 2015-2-18 05:49
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: admin 时间: 2015-3-6 02:13
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 不帅 时间: 2015-3-12 20:18
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 深爱那片海 时间: 2015-3-20 03:27
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

欢迎光临仓酷云 (http://ckuyun.com/)