Este artículo presenta principalmente el código de muestra del icono AmazeUI. El código de muestra introducido en el artículo es muy detallado, que tiene un cierto valor de referencia para el estudio o el trabajo de todos. Amigos que lo necesiten, aprendamos junto con el editor.
Amaze UI está orientada al desarrollo HTML5 y utiliza CSS3 para la interacción de animación, que es fluida y eficiente, y es más adecuada para dispositivos móviles, permitiendo que las aplicaciones web se carguen más rápido. Este artículo presenta principalmente el código de muestra del icono AmazeUI, de la siguiente manera:
<! doctype html>
<html class = "no-js">
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
< meta name = "description" content = "">
<meta name = "keywords" content = "">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title> 图标</title>
<meta name = "renderer" content = "webkit">
<meta http-equiv = "Cache-Control" content = "no-siteapp" />
<link rel = "icon" type = "image / png "href =" assets / i / favicon.png ">
<meta name ="compatible con aplicaciones web móviles "content =" yes ">
<link rel =" icon "tamaños =" 192x192 "href =" assets/i/[email protected] ">
<meta name =" apple-mobile -con capacidad para aplicaciones web "content =" yes ">
<meta name = "apple-mobile-web-app-status-bar-style" content = "black">
<meta name = "apple-mobile-web-app-title" content = "Amaze UI" />
<enlace rel = "apple-touch-icon-precomposed" href = "assets/i/[email protected]">
<meta name = "msapplication-TileImage" content = "assets/i/[email protected] ">
<meta name =" msapplication-TileColor "content =" # 0e90d2 ">
<link rel =" stylesheet "href =" assets / css / amazeui.min.css ">
</head>
<body style =" margin: 50px; ">
<! - 添加 Clase ->
<span class =" am-icon-qq "> QQ </span>
<span class =" am-icon-weixin ">Wechat </span>
<! - 图标 大小 ->
<p> <span class = "am-icon-home"> </span> 默认 大小 </p>
<p> <span class = "am-icon -inicio am-icon-sm "> </span> .am-icon-sm </p>
<p> <span class = "am-icon-home am-icon-md"> </span> .am-icon-md </p>
<p> <span class = "am-icon-home am-icon -lg "> </span> .am-icon-lg </p>
<! - Botón de icono ->
<a href="##" class="am-icon-btn am-icon-twitter"> </a>
<a href="##" class="am-icon-btn am-icon-facebook"> </a>
<a href = "##" class = "am-icon-btn am-icon -github "> </a>
<a href="##" class="am-icon-btn am-primary am-icon-qq"> </a>
<a href =" ## "class =" am -icon-btn am-secundario am-icon-drupal "> </a>
<a href="##" class="am-icon-btn am-success am-icon-shield"> </ a>
<a href="##" class="am-icon-btn am-warning am-icon-warning"> </a>
<a href = "##" class = "am-icon-btn am -peligro am-icon-youtube "> </a>
<! - 旋转 动画 ->
<i class =" am-icon-spinner am-icon-spin "> </i>
<i class = "am-icon-refresh am-icon-spin"> </i>
<i class = "am-icon-circle-o-notch am-icon-spin"> </i>
<i class = "am-icon-cog am-icon-spin"> </i>
<i class = "am-icon-gear am-icon-spin"> </i>
<i class = "am-icon-spinner am- icon-pulse "> </i>
<! - 固定 宽度 ->
<ul>
<li> <i class =" am-icon-qq am-icon-fw "> </i> QQ </li>
<li> <i class = "am-icon-skype am-icon-fw"> </i> Skype </li>
<li> <i class = "am-icon-github am-icon-fw"> < / i> GitHub </li>
<li> <i class = "am-icon-cc-amex am-icon-fw"> </i> Amex </li>
</ ul>
<! - [if (gte IE 9) |! (IE)]> <! ->
<script src = "assets / js / jquery.min.js"> </script>
<! - <! [endif] ->
<! - [if lte IE 8]>
<script src = "assets / ie8 / jquery.min.js"> </script>
<script src = "assets / ie8 / modernizr.js"> </script>
<script src = "assets / js / amazeui.ie8polyfill.min.js"> </script>
<! [endif] ->
<script src = "assets / js / amazeui.min.js"> </script>
</body>
</html>
Imagen de efecto:
