仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 779|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:CSS网页制造实例教程:十分酷的日期效果

[复制链接]
莫相离 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:17:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
那么什么是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:23 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
飘飘悠悠 该用户已被删除
板凳
发表于 2015-1-31 07:37:30 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
灵魂腐蚀 该用户已被删除
地板
发表于 2015-2-6 18:30:04 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
再见西城 该用户已被删除
5#
发表于 2015-2-18 05:49:16 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
admin 该用户已被删除
6#
发表于 2015-3-6 02:13:22 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
不帅 该用户已被删除
7#
发表于 2015-3-12 20:18:50 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
深爱那片海 该用户已被删除
8#
发表于 2015-3-20 03:27:24 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 21:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表