日期垂直排列的两种技巧(2)
作者:dishuipiaoxiang 来源:Denis'Blog 发布时间:2009-08-28 12:38:00
标签:css,日期,垂直,技巧
二、利用Text Rotation来实现
Jonathan Snook 在他的文章《Text Rotation with CSS》中提到用Text Rotation来实现这种效果。这里对其作简要的描述。
如今,很多主流的浏览器如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 等属性,但在此对我毫无意义。
在Jonathan Snook的这篇文章的留言中,Ashish 提到在IE中使用css的一个属性writing-mode:tb-rl可以得到同样的效果,本人做过测试,的确可以使文本垂直排列。但与旋转文本略有不同,主要体现在文字起始的方向上。另外,本人在IEtest中测试IE8,使用BasicImage好像不能生效。
三、总结
对比两种方法。很明显,第一种方法无论是浏览器支持上还是视觉效果的美观上都强于第二种,唯一感到不足的是css代码较长。第二种方法虽不甚完美,但其实现过程并不复杂,不需要任何图片,但作为一种开拓思路的尝试也未尝不可。


猜你喜欢
- 本文实例讲述了基于Python开发chrome插件的方法。分享给大家供大家参考,具体如下:谷歌Chrome插件是使用HTML、JavaScr
- 阅读上一篇:javascript面向对象编程(二) [Interface,Class.implement 接口及实现]接口规定了一些方法,如
- 本文实例为大家分享了Python Unittest自动化单元测试框架的具体代码,供大家参考,具体内容如下1、python 测试框架(本文只涉
- python中.split()只能用指定一个分隔符例如:text='3.14:15'print text.split(
- 最近在学习的时候遇到了一个问题始终没有解决,这个博客写的也不是完全解决了这个问题。指示换了一种可行的思路而已。在运行一些显示动态的图片时,P
- Python在很大程度上可以对shell脚本进行替代。笔者一般单行命令用shell,复杂点的多行操作就直接用Python了。这篇文章就归纳一
- 本文实例为大家分享了python提取英语pdf内容并翻译的具体代码,供大家参考,具体内容如下前期准备工作:翻译接口: 调用的是百度翻译的ap
- 摘要: Portal是IT领域的新技术,是企业信息化工作的发展方向之一。本文首先介绍了Oracle Portal的定义、特点,接着阐述了po
- 本文是 《用 Golang 实现一个 Redis》系列文章第二篇,本文将分别介绍Redis 通信协议 以及 协议解析器 的实现,若您对协议有
- 本文实例讲述了Zend Framework教程之Zend_Config_Ini用法。分享给大家供大家参考,具体如下:Zend_Config_
- append() 方法向列表的尾部添加一个新的元素。只接受一个参数。>>> num = [1,2]>>>
- 1. 谈谈Javascript的对象Javascript作为一种弱语言类型的语言,同时也是一种动态类型的语言。在使用Javascript的过
- 排名函数是SQL Server2005新加的功能。在SQL Server2005中有如下四个排名函数:1.row_number2.rank3
- 如下所示:file->settings->Editor->General->Console里面的console co
- 例子一def filter(self, record): """Our custom
- 前言:如果使用进到的日志文件方法:logging.FileHandler,会导致日志信息全部存放在一个日志文件中,不利于后面对日志文件的使用
- 前言本篇文章要使用OpenCV、Numpy 和Math这3个工具包实现一个简单的滤镜编辑器。在这个滤镜编辑器中,包含了3种滤镜效果,它们分别
- 在使用pycharm开发工具连接mysql数据库时提示错误,信息如下:Server returns invalid timezone. Go
- 需求很简单比如我在做机器学习实验的时候,实验结果的保存路径是'runs/exp'。这样就会出现一个问题:当我第二次运行程序的
- 条件1、能够上网2、必须是你的好友3、必须能二维码登录网页微信发送示例# 使用微信接口给微信好友发送消息,import itchat&nbs