|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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……但标准语法最好有序的写。 |
|