CSS文字竖排技巧-很实用博客网站

CSS文字竖排技巧

很多时候CSS的作用会发挥的超乎我们的想象。比如前边利用CSS进行圆角处理的技巧。今天，又从shawphy那里看到了利用CSS对文字进行竖排的技巧，非常巧妙。这里，本站对他的代码进行了修改，本质是一样的，只是看起来更简洁一些罢了。

下面给出效果和代码：

水調歌頭

蘇軾　

明月幾時有　

把酒問青天　

不知天上宮闕　

今夕是何年　

我欲乘風歸去　

又恐瓊樓玉宇　

高處不勝寒　

起舞弄清影　

何似在人間　

轉朱閣　

低綺戶　

照無眠　

不應有恨　

何事長向別時圓　

人有悲歡離合　

月有陰晴圓缺　

此事古難全　

但願人長久　

千里共嬋娟　

Source Code Example[代码示例]

<style type="text/css"> .c1{font-size:xx-large;font-weight:bold;line-height:1em;width:1.5em; float:right;} .c2{width:1.5em; float:right} </style> <div class="c1">水調歌頭</div>  <div class="c2">　</div>  <div class="c2">蘇軾　</div>  <div class="c2">　</div>  <div class="c2">明月幾時有　</div>  <div class="c2">把酒問青天　</div>  <div class="c2">不知天上宮闕　</div>  <div class="c2">今夕是何年　</div>  <div class="c2">我欲乘風歸去　</div>  <div class="c2">又恐瓊樓玉宇　</div>  <div class="c2">高處不勝寒　</div>  <div class="c2">起舞弄清影　</div>  <div class="c2">何似在人間　</div>  <div class="c2">　</div>  <div class="c2">轉朱閣　</div>  <div class="c2">低綺戶　</div>  <div class="c2">照無眠　</div>  <div class="c2">不應有恨　</div>  <div class="c2">何事長向別時圓　</div>  <div class="c2">人有悲歡離合　</div>  <div class="c2">月有陰晴圓缺　</div>  <div class="c2">此事古難全　</div>  <div class="c2">但願人長久　</div>  <div class="c2">千里共嬋娟　</div>

Tags: CSS