登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

章鱼博客

与你共享

 
 
 

日志

 
 

竖排文字的编排  

2009-01-30 23:53:55|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 

竖排文字的基本模式

用CSS属性书写的基本代码

<DIV style="WRITING-MODE: tb-rl">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 22pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" color=#ff0000>满江红<BR>岳飞<BR>怒发冲冠,<BR>凭栏处潇潇雨歇。<BR>抬望眼,  <BR>
仰天长啸,<BR>壮怀激烈。<BR>三十功名尘与土,<BR>八千里路云和月。<BR>莫等闲白了少年头,<BR>空悲切。<BR>靖康耻,<BR>犹未雪;<BR>
臣子恨,<BR>何时灭!<BR>驾长车踏破贺兰山缺。<BR>壮志饥餐胡虏肉,<BR>笑谈渴饮匈奴血。<BR>待从头收拾旧山河,<BR>朝天阙。<BR>
 </FONT></DIV>
显示效果图

满江红
岳飞
怒发冲冠,
凭栏处潇潇雨歇。
抬望眼,
仰天长啸,
壮怀激烈。
三十功名尘与土,
八千里路云和月。
莫等闲白了少年头,
空悲切。
靖康耻,
犹未雪;
臣子恨,
何时灭!
驾长车踏破贺兰山缺。
壮志饥餐胡虏肉,
笑谈渴饮匈奴血。
待从头收拾旧山河,
朝天阙。

 

 说明:

 DIV style= 定义css样式表标记

WRITING-MODE:布局属性名称   

属性值  

tb-rl    定义 垂直,表示至上而下、从右向左。

rl-tb   定义水平

每行竖排字体结束,要在后面加一个换行标记<BR>


可以调整竖排文字的行距和字距的代码

<DIV style="LINE-HEIGHT: 2em; LETTER-SPACING: 0.2em; WRITING-MODE: tb-rl">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 18pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" color=#0000ff>满江红<BR>岳飞<BR>怒发冲冠,<BR>凭栏处潇潇雨歇。<BR>抬望眼,<BR>
仰天长啸,<BR>壮怀激烈。<BR>三十功名尘与土,<BR>八千里路云和月。<BR>莫等闲白了少年头,<BR>空悲切。<BR>靖康耻,<BR>犹未雪;<BR>臣子恨,<BR>何时灭!<BR>驾长车踏破贺兰山缺。<BR>壮志饥餐胡虏肉,<BR>笑谈渴饮匈奴血。<BR>待从头收拾旧山河,<BR>朝天阙。<BR>
 </FONT></DIV>
显示效果图

满江红
岳飞
怒发冲冠,
凭栏处潇潇雨歇。
抬望眼,
仰天长啸,
壮怀激烈。
三十功名尘与土,
八千里路云和月。
莫等闲白了少年头,
空悲切。
靖康耻,
犹未雪;
臣子恨,
何时灭!
驾长车踏破贺兰山缺。
壮志饥餐胡虏肉,
笑谈渴饮匈奴血。
待从头收拾旧山河,
朝天阙。

说明

LINE-HEIGHT: 2.0em            调整文字水平行间距.数值可调整。

LETTER-SPACING: 0.2em 调整文字垂直间距. 数值可调整。

注:上面的效果图有一个问题,就是有些行竖排文字多了会自动折行、影响竖排字体的美观。


       只要加一个表格一行一列的代码,做一个图框套装,宽度定为700不变,高度视每行字多少而定。

图框套装代码:

<TABLE borderColor=#6495ED height=300 cellSpacing=3 cellPadding=1 width=700 align=center

border=15>
<TBODY>
<TR>
<TD>
<DIV style="LINE-HEIGHT: 2em; LETTER-SPACING: 0.2em; WRITING-MODE: tb-rl"><FONT style="FONT-

WEIGHT: normal; FONT-SIZE: 22pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal"

color=#ff0000>满江红<BR>岳飞<BR>怒发冲冠,<BR>凭栏处潇潇雨歇。<BR>抬望眼,<BR>仰天长啸,<BR>壮怀激烈。<BR>三十功名尘与土,<BR>八千里路云和月。<BR>莫等闲白了少年头,<BR>空悲切。<BR>靖康耻,<BR>犹未雪;<BR>臣子恨,<BR>何时灭!<BR>驾长车踏破贺兰山缺。<BR>壮志饥餐胡虏肉,<BR>笑谈渴饮匈奴血。<BR>待从头收拾旧山河,<BR>朝天阙。<BR>

</FONT></DIV></TD></TR></TBODY></TABLE>

看看效果,是不是每行竖排文字不自动折行了!!!

 

满江红
岳飞
怒发冲冠,
凭栏处潇潇雨歇。
抬望眼,
仰天长啸,
壮怀激烈。
三十功名尘与土,
八千里路云和月。
莫等闲白了少年头,
空悲切。
靖康耻,
犹未雪;
臣子恨,
何时灭!
驾长车踏破贺兰山缺。
壮志饥餐胡虏肉,
笑谈渴饮匈 奴血。
待从头收拾旧山河,
朝天阙。

 

说明: 这是表格图框套装代码

<TABLE borderColor=#6495ED height=300 cellSpacing=3 cellPadding=1 width=700 align=center

border=15>
<TBODY>
<TR>
<TD>

  评论这张
 
阅读(430)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018