html实现上角标的效果

来源：互联网发布：济宁市高新区网络问政编辑：程序博客网时间：2024/05/29 14:42

注：此效果主要运用了css3中的rotate属性

首先，一起来看一看最终的实现效果

好的，那么现在我们来黏贴代码。

<!DOCTYPE html><html lang="en"><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 class="con">    <div class="subscript">      角标    </div></div></body></html>

代码我感觉大部分应该可以看得懂，如果有什么问题的话，欢迎提问

阅读全文

1 0