HTML5使用<ruby>和<rt>来实现拼音标注效果
2017-11-12 13:41
253 查看
<!doctype html>
<html>
<head>
<style type="text/css">
ruby{
font-size:40px;
}
rt{
font-size:10px;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<p>
<ruby>
海<rt>hai</rt>
水<rt>shui</rt>
朝<rt>chao</rt>
朝<rt>zhao</rt>
朝<rt>zhao</rt>
朝<rt>chao</rt>
朝<rt>zhao</rt>
朝<rt>chao</rt>
朝<rt>zhao</rt>
落<rt>luo</rt>
</ruby>
</p>
<p>
<ruby>
浮<rt>fu</rt>
云<rt>yun</rt>
长<rt>zhang</rt>
长<rt>chang</rt>
长<rt>chang</rt>
长<rt>zhang</rt>
长<rt>chang</rt>
长<rt>zhang</rt>
长<rt>chang</rt>
消<rt>xiao</rt>
</ruby>
</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现字体滚动效果的标签 <marquee>详解
- Android实战简易教程<十四>（介绍SwipeMenuListView-简单实现类似QQ的滑动删除效果）
- 动画效果之渐变、缩放、平移、旋转<代码实现>
- JavaSE8基础 文档注释中 使用<br />实现换行效果
- android水波纹涟漪效果的实现<入门+初步提高>
- Android UI设计之<一>使用ImageView实现ProgressBar旋转效果
- FreeMarker编写一个用于实现<select/>效果的通用指令
- Android实战简易教程<二十六>（基于ViewPager实现微信页面切换效果）
- 实现点击超链接<a>标签，点击的标签变色，标注
- Android UI设计之<四>自定义TextView属性，实现带边框效果的TextView
- 基于avd7181c解决视频输入效果差的问题<四>---android显示相关实现调试手记
- html5使用<marquee>标签实现走马灯效果
- html5：<canvas>标签实现动态效果
- html5：<canvas>标签实现动态效果
- 用CSS来定义<p>标签，要求实现以下效果：字体颜色再IE6下为黑色，IE7下为红色，IE8下为绿色，其他浏览器下为黄色。
- Android UI设计之<十>自定义ListView，实现QQ空间阻尼下拉刷新和渐变菜单栏效果
- jstl<c:forEach>实现break效果
- 2016/2/26 <marquee></marquee>实现多种滚动效果
- Android实战简易教程<十二>（ViewFlipper实现幻灯效果）
- 利用<div>层 和<img>标签，实现一个图片两个动画效果