编程 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 border-radius属性详解

Jul 05 HTML / CSS

css3 中实现炫酷的loading效果

Apr 26 HTML / CSS

CSS3实现的闪烁跳跃进度条示例(附源码)

Aug 19 HTML / CSS

CSS3提交意见输入框样式代码

Oct 30 HTML / CSS

实例教程纯CSS3打造非常炫的加载动画效果

Nov 05 HTML / CSS

使用CSS3制作饼状旋转载入效果的实例

Jun 23 HTML / CSS

分享CSS3制作卡片式图片的方法

Jul 08 HTML / CSS

css3 中translate和transition的使用方法

Mar 26 HTML / CSS

详解html5 canvas 微信海报分享（个人爬坑）

Jan 12 HTML / CSS

canvas生成带二维码海报的踩坑记录

Sep 11 HTML / CSS

h5封装下拉刷新

Aug 25 HTML / CSS

利用html+css实现菜单栏缓慢下拉效果的示例代码

Mar 30 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

PHP安装攻略:常见问题解答（一）

2006/10/09 PHP

追求程序速度，而不是编程的速度

2008/04/23 PHP

php join函数应用

2011/05/04 PHP

用php实现百度网盘图片直链的代码分享

2012/11/01 PHP

Yii2 加载css、js 载静态资源的方法

2017/03/10 PHP

使用XHProf查找PHP性能瓶颈的实例

2017/12/13 PHP

php新建文件的方法实例

2019/09/26 PHP

Javascript 继承实现例子

2009/08/12 Javascript

javascript中的onkeyup和onkeydown区别介绍

2013/04/28 Javascript

常用js字符串判断方法整理

2013/10/18 Javascript

js改变鼠标的形状和样式的方法

2014/03/31 Javascript

零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

2014/12/20 Javascript

JQuery实现超链接鼠标提示效果的方法

2015/06/10 Javascript

仅30行代码实现Javascript中的MVC

2016/02/15 Javascript

JavaScript中this的用法实例分析

2016/12/19 Javascript

jQuery居中元素scrollleft计算方法示例

2017/01/16 Javascript

JS实现JSON.stringify的实例代码讲解

2017/02/07 Javascript

jquery.cookie.js的介绍与使用方法

2017/02/09 Javascript

three.js实现炫酷的全景3D重力感应

2018/12/30 Javascript

nodejs微信开发之自动回复的实现

2019/03/17 NodeJs

layui 解决富文本框form表单提交为空的问题

2019/10/26 Javascript

Vue项目前后端联调(使用proxyTable实现跨域方式)

2020/07/18 Javascript

vue的webcamjs集成方式

2020/11/16 Javascript

[00:32]10月24、25日辉夜杯外卡赛附加赛开赛！

2015/10/23 DOTA

python实现下载pop3邮件保存到本地

2018/06/19 Python

浅谈Python大神都是这样处理XML文件的

2019/05/31 Python

python分布式计算dispy的使用详解

2019/12/22 Python

Python3 xml.etree.ElementTree支持的XPath语法详解

2020/03/06 Python

用HTML5实现网站在windows8中贴靠的方法

2013/04/21 HTML / CSS

M.M.LaFleur官网：美国职业女装品牌

2020/10/27 全球购物

客服文员岗位职责

2013/11/29 职场文书

品牌宣传方案

2014/03/21 职场文书

中国梦读书活动总结

2014/07/10 职场文书

致运动员赞词

2015/07/22 职场文书

《山中访友》教学反思

2016/02/24 职场文书

2016年度基层党建工作公开承诺书

2016/03/25 职场文书