架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 49|回复: 0

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

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



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汉化版
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

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

Mail To:help@itsvse.com

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

GMT+8, 2019-10-24 05:10

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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