您现在的位置是：网站首页> 编程资料编程资料

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

2023-10-22 260人已围观

简介 ruby-position能在样式上定制文字周围的注音位置,页面编码设置好以后可以用来制作各种语言之间的加注翻译效果,下面我们来看一下使用CSS3的ruby-position固定注音位置的用法示例:

ruby-position 指定注意的位置时使用。<设置或检索通过rt对象指定的注释文本或发音指南（参考ruby对象）的位置。>

属性值
1.before 注音文本会在基础文字上面表示。（默认值）
2.after 注音文本会在基础文字下面表示。
3.right 注音文本会在基础文字右面表示。

实例代码

XML/HTML Code复制内容到剪贴板
  1. >  
  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">新

上一篇：使用CSS的table-cell属性实现左图右文的排版方法详解CSS中使用table-cell法来达到居中效果CSS：Table-cell属性的妙用让div也能享受table定位的好处关于CSS中的display:table-cell使用技巧的几种应用

下一篇：CSS中的table-cell属性使用实例教程使用CSS的table-cell属性实现左图右文的排版方法详解table-cell完成左侧定宽，右侧定宽及左右定宽等布局的实现方法CSS中使用table-cell法来达到居中效果CSS：Table-cell属性的妙用让div也能享受table定位的好处实现div垂直居中的display:table-cell方法示例介绍display:table-cell实现兼容性的两栏自适应布局实现代码关于CSS中的display:table-cell使用技巧的几种应用

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网