使用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固定注音位置的用法示例

HTML / CSS 相关文章推荐
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 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
You might like
PHP4与PHP5的时间格式问题
2008/02/17 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Django框架视图函数设计示例
2019/07/29 Python
python实现扫雷游戏
2020/03/03 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
后勤人员自我鉴定
2013/10/20 职场文书
高中历史教学反思
2014/02/08 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
《社戏》教学反思
2016/02/22 职场文书