How to achieve superscript effect in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to achieve superscript effect in html

Oct 22, 2020 pm 06:43 PM

html

How to achieve superscript effect in html

Let’s take a look at the effect first:

(Recommended tutorial: html video tutorial)

Implementation code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;制作角标的方法&lt;/title&gt;
    &lt;script src=&quot;http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
          .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: &quot;黑体&quot;;
        background-color: #0c60ee;
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        transform:rotate(45deg);
      }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
    &lt;div&gt;
      角标
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Related recommendations: html tutorial

The above is the detailed content of How to achieve superscript effect in html. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn