首　页 　– 　网络编程 　– 　数据库 　–　 网页设计工具　– 　网页脚本语言 　– 　美术设计理论 　–　 服务器技术
· 网店模板
· 设为首页
· 收藏本网
当前位置： 首页> 网页脚本语言> CSS教程> CSS文字竖排7种方法大总结


CSS文字竖排7种方法大总结
    7种用CSS可创建竖排文字的方法总结，希望这几种方法能够给你带来一些提示。

方法一：<br/>标签

一种可能的方法(但不推荐)是在每个字母后面添加<br />标签来实现竖排文字：
<h1>
   N <br />E <br />T <br />T <br />U <br />T <br />S
</h1> 
 
千万不要使用使用这种方法，它是跛脚和草率的。

方法二：静态包裹

通过这个方法，我们将每个字母包裹在一个span中，然后在CSS中设置它的display属性为block。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>

  <h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>

</body>
</html> 

这种方法的问题是，除了可怕的标签外，它需要你手工去给每个字母用span括起来。如果这些文字是由CMS动态生成的，那就别用这种方法了。

方法三：使用JavaScript

我最初的想法是用JavaScript动态地添加span标签，这样我们就避开了方法二遇到的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>
  <h1> NETTUTS </h1>

  <script>
    var h1 = document.getElementsByTagName(’h1’)[0];
    h1.innerHTML = ’<span>’ + h1.innerHTML.split(’’).join(’</span><span>’) + ’</span>’;
  </script>
</body>
</html> 
本文分页: 1 2 3

Tags：CSS文字竖排7种方法大总结
上一篇文章：DIVCSS总结:有用的3个经典技巧
下一篇文章：详解css3中background用法增强和调整
阅读热门榜
最新更新
网页设计大本营 版权所有
武动乾坤　斗破苍穹2　傲视遮天　link　美团贵阳团购网
Copyright ®2008 Www.Code-123.Com All Rights Reserved