来看看：CSS实例:日期垂直分列的两种技能
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。网页制造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><!--><styletype="text/css">.example-date.year{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}.example-date.year_1{*right:-20px;_right:0;writing-mode:tb-rl;}</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>
3、总结
对照两种办法。很分明，第一种办法不管是扫瞄器撑持上仍是视觉效果的美妙上都强于第二种，独一感应不敷的是css代码较长。第二种办法虽不甚完善，但实在现历程其实不庞大，不必要任何图片，但作为一种开辟思绪的实验也何尝不成。
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 可以使用 CSS 检查工具进行设计。
页:
[1]