利用CSS实现文字竖排[网站美工]

款式表的文字处理属性中有两个重要的属性:writing-mode和text-align.让我们先看看它们的用法:

 

1. writing-mode（设置对象书写方向）

　　语法:writing-mode : lr-tb、tb-rl
　　参数:lr-tb:从左向右,从上往下 　tb-rl:从上往下,从右向左
　　示例:div { writing-mode: tb-rl; }

 

2. text-align（设置对象中文本的对齐方法）

　　语法:text-align : left、right、center、justify
　　参数:left:左对齐　　right:右对齐　　center:居中　　justify:两头对齐
　　示例:div { text-align : center; }

 

　接下来让我们来制作一个紧排的实例:

示例文字:

 

确切,在表现文字的竖排在文字处理办公软件中非常简单便可以实现.由于这种效果在网页制作中并不多见,所以这个问题的谈论对比少.但是在制作具有中国古代特点的网站,如文字历史、书法、名胜古迹旅游等等网站时,假如用上竖排的文字,配以古色古香的后台及俭朴陈旧的色彩,在视觉上会获得意想不到的效果.

看了实例与示例,我们可以知道为文字赋予了“writing-mode”的属性值为“tb-rl”,文字就“从上往下”排,赋予了“text-align”的属性值为“left”,文字就“从右向左”排.总之加入了< div >……< /div >里的内容城市按定义的布列方法布列.

 

最后一点要阐明的是“writing-mode”目前只有IE浏览器支持,Nestscape浏览器不支持!