首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onJuly 05, 2016

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

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

实例代码

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

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 #HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 #HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 #HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 #HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 #HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 #HTML / CSS
老生常谈CSS中的长度单位
Jun 27 #HTML / CSS
分区(2) Excel(4) 自动播放(1) 乱码(3) 信息校验(1) 静态压缩(1) 接口(1) 正则表达式(3) Coroutine(1) 驱动模型(1)
You might like
php实现监听事件
2013/11/06 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python文件路径名的操作方法
2019/10/30 Python
简单的Python人脸识别系统
2020/07/14 Python
Python pymsql模块的使用
2020/09/07 Python
严选全球尖货，立足香港：Bonpont宝盆
2018/07/24 全球购物
沃达丰英国有限公司：Vodafone英国
2019/04/16 全球购物
入党自我评价优缺点
2014/01/25 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
二人合伙经营协议书
2014/09/13 职场文书
党员自我剖析材料（群众路线）
2014/10/06 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
Python实现视频中添加音频工具详解
2021/12/06 Python