网页文字纵向排版方法使用示例

来源：互联网发布：2017高校网络舆情事件编辑：程序博客网时间：2024/05/22 12:43

网页设计，实际应用在会遇到文字纵向排版，竖排文字：使用writing-mode标签就可以了。

writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。比如:
p{
writing-mode: tb-rl;
}

以下例子模拟公交站牌：

html 文件body 部分内容如下：

<!--复制内容开始--><style>.biaoti{height:20px;width:200px;line-height:15px;}.biaoti span{   color:red;}.sp_content .shupai{writing-mode: lr-tb;width:12px;float:left;padding-right:10px;height:80px;} .sp_content{   float:left;   margin-top:-20px;   margin-left:35px;}.sp_content .shupai span{  color:red;} .clear{  clear:both;}.gongjiao{   width:200px;   height:180px;   float:left;   border:1px solid green;   margin-right:10px;   padding-left:5px;}</style><div class="gongjiao"> <p class="biaoti"><span>212路</span></p>  <div class="sp_content">  <p class="shupai">科普公园</p>  <p class="shupai"><span>文萃路</span></p>  <p class="shupai">陆军总院</p>  <p class="shupai">地王国际花园</p> </div></div><!--分隔符--><!--<div class="clear"></div>--><div class="gongjiao"> <p class="biaoti"><span>213路</span></p> <div class="sp_content">  <p class="shupai">科普公园</p>  <p class="shupai">文萃路</p>  <p class="shupai"><span>陆军总院</span></p>  <p class="shupai">地王国际花园</p> </div></div><!--分隔符--><!--<div class="clear"></div>--><div class="gongjiao"> <p class="biaoti"><span>218路</span></p> <div class="sp_content">  <p class="shupai">科普公园</p>  <p class="shupai">文萃路</p>  <p class="shupai">陆军总院</p>  <p class="shupai"><span>地王国际花园</span></p> </div></div><!--复制内容结束-->