编程 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复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ruby-position </title>
<style>
ruby.sample1 {ruby-position:before;}
ruby.sample2 {ruby-position:after;}
ruby.sample3 {ruby-position:right;}
</style>
</head>
<body>
<p><ruby class="sample1">新?志?<rt>しんかんせん</rt></ruby></p>
<p><ruby class="sample2">新干线<rt>xinganxian</rt></ruby></p>
<p><ruby class="sample3">高铁<rt>High-speed rail</rt></ruby></p>
</body>
</html>

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

使用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 职场文书