base10.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../css/weui.css"/>
  8. <link rel="stylesheet" href="../css/weuix.css"/>
  9. <script src="../js/zepto.min.js"></script>
  10. <script>
  11. $(function(){
  12. });
  13. </script>
  14. </head>
  15. <body ontouchstart>
  16. <div class="page-hd">
  17. <h1 class="page-hd-title">
  18. 图标
  19. </h1>
  20. <p class="page-hd-desc">默认和126个新增icon icon-1 数字</p>
  21. </div>
  22. <i class="weui-icon-success weui-icon_msg"></i>
  23. <i class="weui-icon-info weui-icon_msg"></i>
  24. <i class="weui-icon-warn weui-icon_msg-primary"></i>
  25. <i class="weui-icon-warn weui-icon_msg"></i>
  26. <i class="weui-icon-waiting weui-icon_msg"></i>
  27. <i class="weui-icon_msg weui-icon-waiting-circle"></i>
  28. <i class="weui-icon_msg weui-icon-safe-warn"></i>
  29. <i class="weui-icon_msg weui-icon-download"></i>
  30. <i class="weui-icon_msg weui-icon-success-no-circle"></i>
  31. <i class="weui-icon_msg weui-icon-success-circle"></i>
  32. <i class="weui-icon_msg weui-icon-cancel"></i>
  33. <i class="weui-icon_msg weui-icon-clear"></i>
  34. <i class="weui-icon_msg weui-icon-safe-success"></i>
  35. <br>
  36. <i class="weui-icon-success"></i>
  37. <i class="weui-icon-success-no-circle"></i>
  38. <i class="weui-icon-success-circle"></i>
  39. <i class="weui-icon-circle"></i>
  40. <i class="weui-icon-warn"></i>
  41. <i class="weui-icon-download"></i>
  42. <i class="weui-icon-info-circle"></i>
  43. <i class="weui-icon-cancel"></i>
  44. <i class="weui-icon-search"></i>
  45. <i class="weui-icon-clear"></i>
  46. <i class="weui-icon-waiting-circle"></i>
  47. <i class="weui-icon-safe-success"></i>
  48. <i class="weui-icon-safe-warn"></i>
  49. <br>
  50. <style>
  51. .icon_lists li{
  52. float:left;
  53. width: 60px;
  54. height:60px;
  55. text-align: center;
  56. list-style-type:none;
  57. }
  58. .icon_lists .icon{
  59. font-size: 24px;
  60. line-height: 40px;
  61. margin: 5px 0;
  62. color:#10AEFF;
  63. -webkit-transition: font-size 0.5s ease-out 0s;
  64. -moz-transition: font-size 0.5s ease-out 0s;
  65. transition: font-size 0.5s ease-out 0s;
  66. }
  67. .icon_lists .icon:hover{
  68. font-size: 80px;
  69. }
  70. </style>
  71. <ul class="icon_lists clear">
  72. <script>
  73. for(var i=1;i<=126;i++){
  74. document.write('<li><span class="icon icon-'+i+'"></span>'+i+'</li>');
  75. }
  76. </script>
  77. </ul>
  78. <br>
  79. <div class="weui-footer weui-footer_fixed-bottom">
  80. <p class="weui-footer__links">
  81. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  82. </p>
  83. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  84. </div>
  85. </body>
  86. </html>