html实现上角标的效果

Dear 丶 2022-06-15 03:16 421阅读 0赞

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

首先，一起来看一看最终的实现效果![Center][]

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

<!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>

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

[Center]: /images/20220615/b0ffe7e9881e45fd9ce2859361326091.png

发表评论取消回复

表情：

评论列表（有 0 条评论，421人围观）

还没有评论，来说两句吧...

相关阅读

相关 html实现烟花效果‘

<p>好的，首先，你需要创建一个HTML文件，然后在文件中加入一个HTML元素，这样你就可以在其中放置烟花效果。</p> <p>接下来，使用HTML中的canv

川长思鸟来/ 2024年03月27日 18:03/ 0 赞/ 76 阅读

相关带角标的RadioButton

[RadioButton小红点、数字角标的实现\_radiobutton 添加数量角标\_一杯清泉的博客-CSDN博客][RadioButton_radiobutton _-C

水深无声/ 2023年10月04日 10:37/ 0 赞/ 8 阅读

相关 html audio缓冲效果实现

网页自定义播放器控件时，需要解决比较棘手的问题一般来说就是媒体文件的缓冲效果数据的来源，和任意跳转播放的缓冲数据来源；这里我只做音频播放控件，以audio为例：对于媒体

你的名字/ 2023年06月07日 12:18/ 0 赞/ 47 阅读

相关 html如何实现商标 TM 角标

1、实现代码如下 <div>小李™</div> 小李™ 更多前端面试题请关注公众号——>面试题库即可查看1000+条面试题 ![在这里插入图片描述][d21

我会带着你远行/ 2022年09月14日 01:49/ 0 赞/ 158 阅读

相关 MUI-badge数字角标的基本使用

badge（数字角标）数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。角标的核心类是`.mui-badge`，默认为实心灰色背景；同时，m

深藏阁楼爱情的钟/ 2022年08月09日 12:44/ 0 赞/ 159 阅读

相关 html实现上角标的效果

注：此效果主要运用了css3中的rotate属性首先，一起来看一看最终的实现效果![Center][] 好的，那么现在我们来黏贴代码。 <!DOCTYPE ht

Dear 丶/ 2022年06月15日 03:16/ 0 赞/ 422 阅读

相关【html】在消息按钮上增加数量角标

html代码： <a onclick="goMessage();" style="width: 60px;height: 100%;color: white;back

怼烎@/ 2022年06月15日 01:13/ 0 赞/ 260 阅读

相关 html实现点赞效果

源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

骑猪看日落/ 2022年05月10日 19:42/ 9 赞/ 563 阅读

相关 HTML + JS实现万年历效果

实现的主要功能： 1. 点击实现日历样式的改变 2. 实现下一次点击时，上一次点击改变的样式恢复原状（核心） 3. 实现点击日历时，在最下方输出信息指定信息（注意：并不

末蓝、/ 2022年02月26日 06:49/ 0 赞/ 582 阅读

相关 Html左上角图标

<link rel="shortcut icon" href="http://pic.crsky.com/uploadfiles/201806/201806131125

灰太狼/ 2021年05月22日 20:36/ 0 赞/ 437 阅读