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怎么实现上角标效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！