|
在制作網(wǎng)頁的時候我們經(jīng)常需要創(chuàng)建一些豎排的文字，或許這對你來說是一件很簡單的事情，但是你是否想過用CSS可有N種創(chuàng)建豎排文字的方法？下面是由我翻譯自Nettuts+的文章，希望這幾種方法能夠給你帶來一些提示。
方法一：<br />標簽
一種可能的方法(但不推薦)是在每個字母后面添加<br />標簽來實現(xiàn)豎排文字：
<h1>
N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>
點擊查看演示
千萬不要使用使用這種方法，它是跛腳和草率的。
方法二：靜態(tài)包裹
通過這個方法，我們將每個字母包裹在一個span中，然后在CSS中設(shè)置它的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動態(tài)生成的，那就別用這種方法了。
方法三：使用JavaScript
我最初的想法是用JavaScript動態(tài)地添加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>
出處：露兜博客
責任編輯：bluehearts
上一頁 下一頁 CSS創(chuàng)建豎排文字的簡單方法 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 CSS創(chuàng)建豎排文字的簡單方法 [1]
第 2 頁 
