编程 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 旋转按钮使用CSS3创建一个旋转可变色按钮

Dec 31 HTML / CSS

CSS3实现大小不一的粒子旋转加载动画

Apr 21 HTML / CSS

html5使用html2canvas实现浏览器截图的示例

Aug 31 HTML / CSS

详解Html5微信支付爬坑之路

Jul 24 HTML / CSS

HTML5探秘：用requestAnimationFrame优化Web动画

Jun 03 HTML / CSS

让IE下支持Html5的placeholder属性的插件

Sep 02 HTML / CSS

使用HTML5的表单验证的简单示例

Sep 09 HTML / CSS

浅谈h5自定义audio(问题及解决)

Aug 19 HTML / CSS

浅析HTML5中的 History 模式

Jun 22 HTML / CSS

HTML5实现移动端复制功能

Apr 19 HTML / CSS

html5移动端禁止长按图片保存的实现

Apr 20 HTML / CSS

CSS实现背景图片全屏铺满自适应的3种方式

Jul 07 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 批量更新网页内容实现代码

2010/01/05 PHP

php有效防止同一用户多次登录

2015/11/19 PHP

jQuery+php简单实现全选删除的方法

2016/11/28 PHP

《JavaScript高级程序设计》阅读笔记（一） ECMAScript基础

2012/02/27 Javascript

javascript for循环从入门到偏门(效率优化+奇特用法)

2012/08/01 Javascript

jquery实现的一个文章自定义分段显示功能

2014/05/23 Javascript

Redis基本知识、安装、部署、配置笔记

2015/03/05 Javascript

JS随机调用指定函数的方法

2015/07/01 Javascript

jQuery实现下滑菜单导航效果代码

2015/08/25 Javascript

JS实现可点击展开与关闭的左侧广告代码

2015/09/02 Javascript

canvas滤镜效果实现代码

2017/02/06 Javascript

Bootstrap导航中表单简单实现代码

2017/03/06 Javascript

Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件

2017/09/18 Javascript

微信小程序数据存储与取值详解

2018/01/30 Javascript

vue 中filter的多种用法

2018/04/26 Javascript

Angular4.0动画操作实例详解

2019/05/10 Javascript

解决layer弹出层msg的文字不显示的问题

2019/09/11 Javascript

使用AutoJs实现微信抢红包的代码

2020/12/31 Javascript

python轻松查到删除自己的微信好友

2016/01/10 Python

Python验证文件是否可读写代码分享

2017/12/11 Python

详谈python在windows中的文件路径问题

2018/04/28 Python

Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)

2020/02/13 Python

Keras - GPU ID 和显存占用设定步骤

2020/06/22 Python

pytorch使用horovod多gpu训练的实现

2020/09/09 Python

详解CSS3 rem(设置字体大小) 教程

2017/11/21 HTML / CSS

CSS3下的渐变文字效果实现示例

2018/03/02 HTML / CSS

澳大利亚床上用品、浴巾和家居用品购物网站：Bambury

2020/04/16 全球购物

护士自荐信

2013/10/25 职场文书

开业庆典邀请函

2014/01/08 职场文书

给公司的建议书范文

2014/05/13 职场文书

2014年文员工作总结

2014/11/18 职场文书

酒店财务部岗位职责

2015/04/14 职场文书

毕业设计工作总结

2015/08/14 职场文书

2016教师年度考核评语大全

2015/12/01 职场文书

青年文明号创建口号大全

2015/12/25 职场文书

人物搭配车车超萌联名预备中【咒术迴战】 ⨯ 【天竺鼠车车】展开合作

2022/04/11 日漫