脚本宝典收集整理的这篇文章主要介绍了html怎么实现上角标效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
先来看看效果:
(推荐教程:html视频教程)
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>制作角标的方法</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <style> .con{ height: 250px; width: 200px; margin: 0 auto; overflow: hidden; margin-top: 100px; position: relative; background-color: #4cd964; } .subscript{ color: #fff; height: 30px; width: 100px; position: absolute; right: -30px; text-align: center; line-height: 30px; font-family: "黑体"; background-color: #0c60ee; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } </style> </head> <body> <div> <div> 角标 </div> </div> </body> </html>
相关推荐:html教程
以上就是html怎么实现上角标效果的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的html怎么实现上角标效果全部内容,希望文章能够帮你解决html怎么实现上角标效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。