编程 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 完美实现圆角效果

Jul 13 HTML / CSS

css图标制作教程制作云图标

Jan 19 HTML / CSS

纯CSS3代码实现文字描边

Apr 25 HTML / CSS

css3实现小箭头各种图形效果

Jul 08 HTML / CSS

html5 touch事件实现页面上下滑动效果【附代码】

Mar 10 HTML / CSS

浅谈cookie和localStorage那些事

Aug 27 HTML / CSS

HTML5 script元素async、defer异步加载使用介绍

Aug 23 HTML / CSS

HTML5 Canvas中绘制矩形实例

Jan 01 HTML / CSS

使用phonegap操作数据库的实现方法

Mar 31 HTML / CSS

html5 postMessage前端跨域并前端监听的方法示例

Nov 01 HTML / CSS

浅析HTML5页面元素及属性

Jan 20 HTML / CSS

HTML页面点击按钮关闭页面的多种方式

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

You might like

第十四节--命名空间

2006/11/16 PHP

落伍首发 php+mysql 采用ajax技术的省市地 3级联动无刷新菜单源码

2006/12/16 PHP

浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法

2013/01/11 PHP

如何给phpcms v9增加类似于phpcms 2008中的关键词表

2013/07/01 PHP

ajax返回值中有回车换行、空格的解决方法分享

2013/10/24 PHP

javascript new fun的执行过程

2010/08/05 Javascript

来自国外的页面JavaScript文件优化

2010/12/08 Javascript

JQuery对checkbox操作（循环获取）

2011/05/20 Javascript

用Javascript来生成ftp脚本的小例子

2013/07/03 Javascript

JQuery中form验证出错信息的查看方法

2013/10/08 Javascript

JS 屏蔽键盘不可用与鼠标右键不可用的方法

2013/11/18 Javascript

js和jquery中循环的退出和继续学习记录

2014/09/06 Javascript

JS数组搜索之折半搜索实现方法分析

2017/03/27 Javascript

jquery dataTable 获取某行数据

2017/05/05 jQuery

快速理解 JavaScript 中的 LHS 和 RHS 查询的用法

2017/08/24 Javascript

JavaScript 异步调用

2017/10/25 Javascript

详解如何使用webpack在vue项目中写jsx语法

2017/11/08 Javascript

JavaScript比较同一天的时间大小实例代码

2018/02/09 Javascript

解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题

2019/09/03 Javascript

JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)

2020/02/03 Javascript

python网络编程学习笔记(一)

2014/06/09 Python

Python最基本的数据类型以及对元组的介绍

2015/04/14 Python

python使用clear方法清除字典内全部数据实例

2015/07/11 Python

Python通过kerberos安全认证操作kafka方式

2020/06/06 Python

python使用布隆过滤器的实现示例

2020/08/20 Python

python基于pygame实现飞机大作战小游戏

2020/11/19 Python

CSS实现的一闪而过的图片闪光效果

2014/04/23 HTML / CSS

html5-websocket基于远程方法调用的数据交互实现

2012/12/04 HTML / CSS

Roots加拿大官网：加拿大休闲服饰品牌

2016/10/24 全球购物

电大自我鉴定范文

2013/10/01 职场文书

销售文员的岗位职责

2013/11/20 职场文书

省文明单位申报材料

2014/05/08 职场文书

教师个人考察材料

2014/12/16 职场文书

订货会邀请函

2015/01/31 职场文书

SQL Server2019数据库之简单子查询的具有方法

2021/04/27 SQL Server

Python 匹配文本并在其上一行追加文本

2022/05/11 Python