首页
所有分类
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 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 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
慢日志(1) hmac(1) requests(1) 相对路径(1) mt-swipe(1) 面向对象(3) Mint UI(1) openpyxl(1) 相对路径 (1) hashlib(1)
You might like
adodb与adodb_lite之比较
2006/12/31 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python更换pip源方法过程解析
2020/05/19 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
小学生爱国演讲稿
2014/04/25 职场文书
同学聚会策划方案
2014/06/06 职场文书
家长会欢迎标语
2014/06/24 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
毕业设计工作总结
2015/08/14 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
Java中的Kotlin 内部类原理
2022/06/16 Java/Android