amazeui学习笔记--css（HTML元素2）--代码Code
一、总结
1、行内代码：code标签<code>
2、代码片段：pre标签<pre>
3、限制代码块高度：添加 .am-pre-scrollable 限制代码块高度，默认为 24rem。是在pre标签里面加的class。
<pre class="am-pre-scrollable"> ... </pre>
4、参考链接：最下面的参考链接是块好东西：各种插件
二、代码Code
目录
定义代码样式。
行内代码
使用 <code> 标签的代码。
<code>code here</code>代码片段
放在 <pre> 里面的代码片段。
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
<pre>
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
</pre>代码块高度
添加 .am-pre-scrollable 限制代码块高度，默认为 24rem。
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-ms-keyframes loader {
0% {-ms-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-ms-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
<pre class="am-pre-scrollable">
...
</pre>