html css 实现文字竖排模拟古籍排版
生活随笔
收集整理的這篇文章主要介紹了
html css 实现文字竖排模拟古籍排版
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>仿古豎排文字</title>
<style type="text/css">
.verticallines{background-color:#EEAD0E;font-family:"Source Han Serif SC";height:360px;margin:1em;padding:2em;font-size:1em;writing-mode:tb-rl; -webkit-writing-mode:vertical-rl;
}
.verticallines span{color:red;font-size:2em;float:left;vartical-align:middle;
}
</style>
</head>
<body><div class="verticallines"><span>易音寶典</span>億憶亦一易 一易亦億憶 觀世界萬千音聲 悟道 空即是色 色即是空 空不異色 色不異空 音聲 有意義 無意義 皆因人與人 人與世界之結(jié)緣而成 同一音 于百千門語言中幻化出無數(shù)種語義 甚是奧妙 而人能分別之語音音素大抵不過百數(shù) 所以以音聲連通異國他族之語義 實(shí)乃以有限為無限 以一當(dāng)百 妙哉 妙哉 現(xiàn)舉數(shù)例與眾分享 以窺是法之玄機(jī)<br/><span>鸚歌貍詩</span>英文 鸚鵡聰慧 能言亦能歌 狐貍狡猾 能文亦能詩 英國之民有智勇 曾稱日不落帝國 其語為英文<br/><span>柴泥字</span>中文 倉頡 伏羲 用柴棍在泥地上描繪萬物 那就是最原初的中文象形文字<br/><span>蘭桂芝</span>語言 如蘭幽香 如桂清香 如芝潤澤 人類的語言也是這樣美好<br/><span>傳思類神</span>翻譯 傳遞思想 類若神明 翻譯是一種神圣崇高的事業(yè)<br/></div></body>
</html>
關(guān)鍵是要注意應(yīng)用
writing-mode:tb-rl;?-webkit-writing-mode:vertical-rl;
float:left;
<br/>
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>仿古豎排文字</title> <style type="text/css"> .verticallines{background-color:#EEAD0E99;font-family:"Source Han Serif SC";height:300px;margin:1em;padding:2em;font-size:1em;writing-mode:tb-rl; //-webkit-writing-mode:vertical-rl; } .bigletters{color:red;font-size:2em;display:inline-block; } .smallletters{font-size:1em;display:inline-block; } .meaning{color:#008080; } </style> </head> <body><div class="verticallines"><span class="bigletters">易音寶典</span><span class="meaning">億憶亦一易 一易亦億憶</span><span class="smallletters">億憶亦一易 一易亦億憶 觀世界萬千音聲 悟道 空即是色 色即是空 空不異色 色不異空 音聲 有意義 無意義 皆因人與人 人與世界之結(jié)緣而成 同一音 于百千門語言中幻化出無數(shù)種語義 甚是奧妙 而人能分別之語音音素大抵不過百數(shù) 所以以音聲連通異國他族之語義 實(shí)乃以有限為無限 以一當(dāng)百 妙哉 妙哉 現(xiàn)舉數(shù)例與眾分享 以窺是法之玄機(jī)</span><span class="bigletters">鸚歌貍詩</span><span class="meaning">英文</span><span class="smallletters">鸚鵡聰慧 能言亦能歌 狐貍狡猾 能文亦能詩 英國之民有智勇 曾稱日不落帝國 其語為英文 </span><span class="bigletters">柴泥字</span><span class="meaning">中文</span><span class="smallletters">倉頡 伏羲 用柴棍在泥地上描繪萬物 那就是最原初的中文象形文字 </span><span class="bigletters">蘭桂芝</span><span class="meaning">語言</span><span class="smallletters">如蘭幽香 如桂清香 如芝潤澤 人類的語言也是這樣美好</span><span class="bigletters">傳思類神</span><span class="meaning">翻譯</span><span class="smallletters">傳遞思想 類若神明 翻譯是一種神圣崇高的事業(yè)</span></div></body> </html> <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>仿古豎排文字</title> <style type="text/css"> .verticallines{background-color:#EEAD0E99;font-family:"Source Han Serif SC";height:300px;margin:1em;padding:2em;font-size:1em;writing-mode:tb-rl; -webkit-writing-mode:vertical-rl; } .bigletters{color:red;font-size:2em;float:left; } .smallletters{color:#333333; } .meaning{color:#008080; } </style> </head> <body><div class="verticallines"><span class="bigletters">易音寶典</span><span class="meaning">億憶亦一易 一易亦億憶</span><span class="smallletters">億憶亦一易 一易亦億憶 觀世界萬千音聲 悟道 空即是色 色即是空 空不異色 色不異空 音聲 有意義 無意義 皆因人與人 人與世界之結(jié)緣而成 同一音 于百千門語言中幻化出無數(shù)種語義 甚是奧妙 而人能分別之語音音素大抵不過百數(shù) 所以以音聲連通異國他族之語義 實(shí)乃以有限為無限 以一當(dāng)百 妙哉 妙哉 現(xiàn)舉數(shù)例與眾分享 以窺是法之玄機(jī)</span><br/><br/><span class="bigletters">鸚歌貍詩</span><span class="meaning">英文 </span><span class="smallletters">鸚鵡聰慧 能言亦能歌 狐貍狡猾 能文亦能詩 英國之民有智勇 曾稱日不落帝國 其語為英文 </span><br/><br/><span class="bigletters">柴泥字</span><span class="meaning"> 中文 </span><span class="smallletters">倉頡 伏羲 用柴棍在泥地上描繪萬物 那就是最原初的中文象形文字 </span><br/><br/><span class="bigletters">蘭桂芝</span><span class="meaning"> 語言 </span><span class="smallletters">如蘭幽香 如桂清香 如芝潤澤 人類的語言也是這樣美好</span><br/><br/><span class="bigletters">傳思類神</span><span class="meaning"> 翻譯 </span><span class="smallletters">傳遞思想 類若神明 翻譯是一種神圣崇高的事業(yè)</span><br/><br/></div></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的html css 实现文字竖排模拟古籍排版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android .9图片详解及应用
- 下一篇： 在AS制作.9图片