返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

CSS 文字竖排 基础教程

时间:2012-04-22 16:09来源:betway必威官网www.etsupport.net 编辑:麦田守望者

实现网页文字竖排的方法有很多,先来看看CSS 样式表中提供的两种文字竖排的方法:

writing-mode (IE5.5+专有属性)
语法:
writing-mode : lr-tb | tb-rl
参数:
lr-tb : 左-右,上-下
tb-rl : 上-下,右-左
另一种是用:
layout-flow (IE5.5+专有属性)
语法:
layout-flow : horizontal | vertical-ideographic
参数:
horizontal : 对象中的内容自左边流入。下一行在前一行下面。这个值适于拉丁语系
vertical-ideographic : 对象中的内容自上而下流入,下一行在前一行左面。这个值适于亚洲语系
但这两种方法都只是 IE 支持,而且效果也不太好控制。除非之外,还可以用 <BR /> 或使用图片来实现文字竖排。
下面这种方法是比较好的,推荐使用:

 

<style>
	#vertical div { width:1.5em; float:right; }
	#vertical .title { font-size:xx-large; font-weight:bold; line-height:1em; }
</style>
<div id="vertical">
    <div class="title">水调歌头</div>  
    <div> </div>  
    <div>苏轼</div>  
    <div> </div>  
    <div>明月几时有</div>  
    <div>把酒问青天</div>  
    <div>不知天上宫阙</div>  
    <div>今夕是何年</div>  
    <div>我欲乘风归去</div>  
    <div>又恐琼楼玉宇</div>  
    <div>高处不胜寒</div>  
    <div>起舞弄清影</div>  
    <div>何似在人间</div>  
    <div> </div>  
    <div>转朱阁</div>  
    <div>低绮户</div>  
    <div>照无眠</div>  
    <div>不应有恨</div>  
    <div>何事长向别时圆</div>  
    <div>人有悲欢离合</div>  
    <div>月有阴晴圆缺</div>  
    <div>此事古难全</div>  
    <div>但愿人长久</div>  
    <div>千里共婵娟</div>
</div>

效果:

 

 

水调歌头

 

苏轼

 

明月几时有

把酒问青天

不知天上宫阙

今夕是何年

我欲乘风归去

又恐琼楼玉宇

高处不胜寒

起舞弄清影

何似在人间

 

转朱阁

低绮户

照无眠

不应有恨

何事长向别时圆

人有悲欢离合

月有阴晴圆缺

此事古难全

但愿人长久

千里共婵娟


 


不错吧,代码规范,浏览器兼容性好,而且能很好地复制内容

顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):css css技巧 CSS基础教程 css实例教程 css源代码
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片