首页
所有分类
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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
保加利亚购物网站(3) PHP面试题(54) C++面试题(199) JAVA面试题(401) 马耳他购物网站(1) 白俄罗斯购物网站(3) 冰岛购物网站(1) 罗马尼亚购物网站(10) 约旦购物网站(1) 哈萨克斯坦购物网站(2)
You might like
20个PHP常用类库小结
2011/09/11 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
php连接mysql数据库
2017/03/21 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
jquery 回车事件实现代码
2011/08/23 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python 等差数列末项计算方式
2020/05/03 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
世界上最好的足球商店：Unisport
2019/03/02 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
2014年大学生自我评价
2014/01/19 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
市场推广策划方案
2014/06/02 职场文书
远程教育培训心得体会
2016/01/09 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫