html怎么实现上角标效果

王林

Lepaskan： 2020-10-22 18:43:38

ke hadapan

4363 orang telah melayarinya

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>

Salin selepas log masuk

相关推荐：html教程

Atas ialah kandungan terperinci html怎么实现上角标效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

html

sumber：csdn.net

Artikel sebelumnya：介绍一下什么是媒体查询 Artikel seterusnya：网页开发中实用的11个文本输入和6个按钮操作特效

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang