编程 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伪类选择器：nth-child()

Apr 02 HTML / CSS

CSS3的resize属性使用初探

Sep 27 HTML / CSS

HTML5验证以及日期显示的实现详解

Jul 05 HTML / CSS

HTML5标签与HTML4标签的区别示例介绍

Jul 18 HTML / CSS

canvas简易绘图的实现（海绵宝宝篇）

Jul 04 HTML / CSS

canvas中普通动效与粒子动效的实现代码示例

Jan 03 HTML / CSS

HTML5 Canvas实现放大镜效果示例

Mar 25 HTML / CSS

Html5让容器充满屏幕高度或自适应剩余高度的布局实现

May 14 HTML / CSS

HTML5开发动态音频图的实现

Jul 02 HTML / CSS

amazeui页面校验功能的实现代码

Aug 24 HTML / CSS

CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

Mar 30 HTML / CSS

HTML5来实现本地文件读取和写入的实现方法

May 25 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/07/17 PHP

php防止SQL注入详解及防范

2013/11/12 PHP

PHP实现生成数据字典功能示例

2018/05/24 PHP

PHP实现的支付宝支付功能示例

2019/03/26 PHP

jQuery+PHP实现图片上传并提交功能

2020/07/27 PHP

JS 有名函数表达式全面解析

2010/03/19 Javascript

jquery实现当滑动到一定位置时固定效果

2014/06/17 Javascript

js实现按一下删除键删除整个单词附demo

2014/09/05 Javascript

javascript中HTMLDOM操作详解

2014/12/11 Javascript

javascript html5摇一摇功能的实现

2016/04/19 Javascript

全面了解addEventListener和on的区别

2016/07/14 Javascript

jQuery实现可展开折叠的导航效果示例

2016/09/12 Javascript

ES6通过babel转码使用webpack使用import关键字

2016/12/13 Javascript

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

2017/02/15 Javascript

JS实现运动缓冲效果的封装函数示例

2018/02/18 Javascript

vue-cli构建项目下使用微信分享功能

2018/05/28 Javascript

JavaScript基于数组实现的栈与队列操作示例

2018/12/22 Javascript

JS实现根据详细地址获取经纬度功能示例

2019/04/16 Javascript

八种Vue组件间通讯方式合集(推荐)

2020/08/18 Javascript

[02:50]【扭转乾坤，只此一招】DOTA2永雾林渊版本开启新篇章

2020/12/22 DOTA

Python SQLAlchemy基本操作和常用技巧（包含大量实例,非常好）

2014/05/06 Python

python使用pyhook监控键盘并实现切换歌曲的功能

2014/07/18 Python

使用Python脚本将Bing的每日图片作为桌面的教程

2015/05/04 Python

Python实现比较扑克牌大小程序代码示例

2017/12/06 Python

Python装饰器知识点补充

2018/05/28 Python

详解python selenium 爬取网易云音乐歌单名

2019/03/28 Python

python动态视频下载器的实现方法

2019/09/16 Python

Python实现CNN的多通道输入实例

2020/01/17 Python

Discard Protocol抛弃协议的作用是什么

2015/10/10 面试题

UNIX操作系统结构由哪几部分组成

2016/02/17 面试题

宗教学大学生职业生涯规划范文

2014/02/08 职场文书

出差报告范文

2014/11/06 职场文书

股东大会通知

2015/04/24 职场文书

2015年房地产个人工作总结

2015/05/26 职场文书

公司年会主持词范文！

2019/05/07 职场文书

标准演讲稿格式结尾应该怎么书写？

2019/07/17 职场文书