使用CSS3的ruby-position固定注音位置的用法示例
ttwinbug 發(fā)布時(shí)間：2016-07-05 11:49:20 作者：佚名 
我要評(píng)論
我要評(píng)論ruby-position能在樣式上定制文字周圍的注音位置,頁面編碼設(shè)置好以后可以用來制作各種語言之間的加注翻譯效果,下面我們來看一下使用CSS3的ruby-position固定注音位置的用法示例:
ruby-position 指定注意的位置時(shí)使用。<設(shè)置或檢索通過rt對(duì)象指定的注釋文本或發(fā)音指南（參考ruby對(duì)象）的位置。>
屬性值
1.before 注音文本會(huì)在基礎(chǔ)文字上面表示。（默認(rèn)值）
2.after 注音文本會(huì)在基礎(chǔ)文字下面表示。
3.right 注音文本會(huì)在基礎(chǔ)文字右面表示。
實(shí)例代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> ruby-position </title>
- <style>
- ruby.sample1 {ruby-position:before;}
- ruby.sample2 {ruby-position:after;}
- ruby.sample3 {ruby-position:right;}
- </style>
- </head>
- <body>
- <p><ruby class="sample1">新幹線<rt>しんかんせん</rt></ruby></p>
- <p><ruby class="sample2">新干線<rt>xinganxian</rt></ruby></p>
- <p><ruby class="sample3">高鐵<rt>High-speed rail</rt></ruby></p>
- </body>
- </html>
實(shí)例圖
相關(guān)文章
html css 控制div或者table等固定在指定位置的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猦tml css 控制div或者table等固定在指定位置的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-06-13- 固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進(jìn)一步的話自然則是用background-position,下面來詳解使用CSS固定頁面背景圖片及位置的方法:2016-05-17
基于jQuery+CSS的固定位置的網(wǎng)頁側(cè)邊欄
側(cè)欄固定式網(wǎng)頁框架，很好的運(yùn)用了 CSS+ jQuery的特性，左側(cè)欄，是不會(huì)隨著滾動(dòng)條而滾動(dòng)的，當(dāng)你拖動(dòng)滾動(dòng)條的時(shí)候，右側(cè)主體區(qū)的內(nèi)容跟著拖動(dòng)2011-01-19- 首先，我們將目光投向了CSS規(guī)范，我想很多人和我一樣很快就想到了position屬性，說到定位，我們很容易想到這個(gè)屬性。2011-01-06
css把容器級(jí)別（div...）標(biāo)簽固定在一個(gè)位置（在頁面最右邊）
這篇文章主要介紹了css把容器級(jí)別（div...）標(biāo)簽固定在一個(gè)位置（在頁面最右邊）的相關(guān)資料,需要的朋友可以參考下2018-07-26
