亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用CSS3的ruby-position固定注音位置的用法示例

ttwinbug   發(fā)布時間：2016-07-05 11:49:20   作者：佚名   我要評論
ruby-position能在樣式上定制文字周圍的注音位置,頁面編碼設(shè)置好以后可以用來制作各種語言之間的加注翻譯效果,下面我們來看一下使用CSS3的ruby-position固定注音位置的用法示例:

ruby-position 指定注意的位置時使用。<設(shè)置或檢索通過rt對象指定的注釋文本或發(fā)音指南（參考ruby對象）的位置。>

屬性值
1.before 注音文本會在基礎(chǔ)文字上面表示。（默認(rèn)值）
2.after 注音文本會在基礎(chǔ)文字下面表示。
3.right 注音文本會在基礎(chǔ)文字右面表示。

實例代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title> ruby-position </title>  
  6. <style>  
  7. ruby.sample1 {ruby-position:before;}   
  8. ruby.sample2 {ruby-position:after;}   
  9. ruby.sample3 {ruby-position:right;}    
  10. </style>  
  11.     
  12. </head>  
  13.     
  14. <body>  
  15. <p><ruby class="sample1">新幹線<rt>しんかんせん</rt></ruby></p>  
  16. <p><ruby class="sample2">新干線<rt>xinganxian</rt></ruby></p>  
  17. <p><ruby class="sample3">高鐵<rt>High-speed rail</rt></ruby></p>  
  18. </body>  
  19. </html>  

實例圖
201675115045234.png (162×180)

相關(guān)文章

最新評論