来看看：CSS实例:日期垂直分列的两种技能

显示全部楼层 · 发表于 2015-1-15 23:37:26

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

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

x

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
网页制造poluoluo文章简介：CSS实例:日期垂直分列的两种技能.
LearningjQuery.com博客帖子列表的右边有一个很酷的日期，如图：

登录/注册后可看大图

从图中我们看到，“2009”垂直分列在右边。用Firebug检察元素，文本“2009”呈现在html布局当中，本文先容完成这类效果的两种办法。
1、使用Sprite手艺来完成
实在现历程已有ChrisCoyier在《DateDisplayTechniquewithSprites》一文中作了具体先容，这里把实在现历程作一个复杂的形貌。很明显，我们不但愿每个日期用一张独自的图片，因而，将其整合到一张图片之上，布置年、月、日在图片的分歧地区，如图：

登录/注册后可看大图

1、Html
页面中html布局以下：
<divclass="postdate">
<divclass="monthm-06">Jun</div>
<divclass="dayd-30">30</div>
<divclass="yeary-2009">2009</div>
</div>
.postdate容器包括三个地区，分离对应年代日，如许很好的包管了语义上的完全性。
在相似wordpress如许的CMS体系中，厥后端代码是如许的：
<divclass="postdate">
<divclass="monthm-<?phpthe_time(m)?>"><?phpthe_time(M)?></div>
<divclass="dayd-<?phpthe_time(d)?>"><?phpthe_time(d)?></div>
<divclass="yeary-<?phpthe_time(Y)?>"><?phpthe_time(Y)?></div>
</div>
2、Css
css是sprite真正发扬感化的中央，使用html中的界说的class属性，让对应的图片得以显现。
起首，让class属性为.postdate的容器绝对定位，如许包括个中的三个地区就会相对定位，并利用统一张背景图片。设置各自的宽度和高度，并将笔墨移出以显现背景图片。
然后，界说每月（12）、天天（31）、每一年（按10年计）详细的背景地位，以显现与其绝对应的图片。
.postdate{
position:relative;
width:50px;
height:50px;
float:left;
}
.month,.day,.year{
position:absolute;
text-indent:-1000em;
background-image:url(/wp-content/themes/ljq/images/dates.png);
background-repeat:no-repeat;
}
.month{top:2px;left:0;width:32px;height:24px;}
.day{top:25px;left:0;width:32px;height:25px;}
.year{bottom:0;right:0;width:17px;height:48px;}

.m-01{background-position:04px;}
.m-02{background-position:0-28px;}
.m-03{background-position:0-57px;}
...morelikethis...

.d-01{background-position:-50px0;}
.d-02{background-position:-50px-31px;}
.d-03{background-position:-50px-62px;}
...morelikethis...

.y-2006{background-position:-150px0;}
.y-2007{background-position:-150px-50px;}
.y-2008{background-position:-150px-100px;}
...morelikethis...

网页制造poluoluo文章简介：CSS实例:日期垂直分列的两种技能.

2、使用TextRotation来完成
JonathanSnook在他的文章《TextRotationwithCSS》中提到用TextRotation来完成这类效果。这里对其作扼要的形貌。
现在，良多支流的扫瞄器如Webkit和Firefox(从3.5入手下手)都撑持扭转HTML元素。那末要使其垂直分列，就能够使用该属性。但须为每种扫瞄器加上前缀。
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
关于IE扫瞄器，可使用一个称之为BasicImage的滤镜来到达目标，该滤镜可以扭转任何具有layout属性的元素。但字体较之于利用图片来讲，其实不显得光滑。
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
该滤镜能够承受四个属性值0、1、2、3，其对应扭转的角度分离为0、90、180、270。只管它还具有mirroring、masking、greyscale等属性，但在此对我毫偶然义。
在JonathanSnook的这篇文章的留言中，Ashish提到在IE中利用css的一个属性writing-mode:tb-rl能够失掉一样的效果，自己做过测试，切实其实可使文本垂直分列。但与扭转文本略有分歧，次要表现在笔墨肇端的偏向上。别的，自己在IEtest中测试IE8，利用BasicImage仿佛不克不及失效。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>日期垂直分列的两种技能--示例</title><styletype="text/css">.example-date{background-color:#998877;float:left;margin-left:10px;padding:45px5px0;position:relative;}.example-date.day{font-size:45px;left:5px;line-height:45px;position:absolute;top:0;}.example-date.month{font-size:25px;text-transform:uppercase;}.example-date.year{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);display:block;font-size:1.1em;background-color:#998877;position:absolute;right:0px;top:10px;float:right;}.example-date.year_1{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);display:block;font-size:1.1em;background-color:#998877;position:absolute;right:0px;*right:-20px;_right:0;top:10px;writing-mode:tb-rl;float:right;}hr{clear:both;margin:15px0;}</style></head><body><h3>利用滤镜</h3><divclass="example-date"><spanclass="day">31</span><spanclass="month">July</span><spanclass="year">2009</span></div><p>利用利用滤镜,在IEtest中检察，IE8beta中笔墨其实不垂直分列。</p><hr/><h3>writing-mode</h3><divclass="example-date"><spanclass="day">31</span><spanclass="month">July</span><spanclass="year_1">2009</span></div><p>利用writing-mode,IE显现其实不靠右，这里我利用cssHack设置right属性为-20px。如许使其回到一般的地位。</p></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
3、总结
对照两种办法。很分明，第一种办法不管是扫瞄器撑持上仍是视觉效果的美妙上都强于第二种，独一感应不敷的是css代码较长。第二种办法虽不甚完善，但实在现历程其实不庞大，不必要任何图片，但作为一种开辟思绪的实验也何尝不成。

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：CSS实例:日期垂直分列的两种技能

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

相关帖子