架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 212|回复: 0

[HTML/HTML5] html 实现上角标的效果

[复制链接]
发表于 2019-10-7 21:38:43
zu
注:此效果主要运用了css3中的rotate属性,效果图如下:

角标.png

html代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>制作角标的方法</title>
  6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
  7.     <style>
  8.           .con{
  9.             height: 250px;
  10.             width: 200px;
  11.             margin: 0 auto;
  12.             overflow: hidden;
  13.             margin-top: 100px;
  14.             position: relative;
  15.             background-color: #4cd964;
  16.           }
  17.       .subscript{
  18.         color: #fff;
  19.         height: 30px;
  20.         width: 100px;
  21.         position: absolute;
  22.         right: -30px;
  23.         text-align: center;
  24.         line-height: 30px;
  25.         font-family: "黑体";
  26.         background-color: #0c60ee;
  27.         -moz-transform:rotate(45deg);
  28.         -webkit-transform:rotate(45deg);
  29.         -o-transform:rotate(45deg);
  30.         -ms-transform:rotate(45deg);
  31.         transform:rotate(45deg);
  32.       }
  33.     </style>
  34. </head>
  35. <body>
  36. <div class="con">
  37.     <div class="subscript">
  38.       角标
  39.     </div>
  40. </div>
  41. </body>
  42. </html>
复制代码
代码我感觉大部分应该可以看得懂,如果有什么问题的话,欢迎提问




上一篇:unity从零打造王者荣耀的课程
下一篇:Alien Skin Exposure X5汉化版
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2020-2-25 20:35

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表