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> 标签的代码。

 Copy
<code>code here</code>

代码片段

放在 <pre> 里面的代码片段。

 Copy
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
<pre>
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
</pre>

代码块高度

添加 .am-pre-scrollable 限制代码块高度,默认为 24rem

 Copy
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>

参考链接

轻量级的代码高亮插件

amazeui学习笔记--css(HTML元素2)--代码Code的更多相关文章

  1. amazeui学习笔记--css(HTML元素4)--图片image

    amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...

  2. amazeui学习笔记--css(HTML元素5)--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  3. amazeui学习笔记--css(HTML元素3)--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  4. amazeui学习笔记--css(HTML元素1)--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  5. amazeui学习笔记--css(布局相关1)--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  6. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  7. amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  8. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  9. amazeui学习笔记--css(基本样式)--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

随机推荐

  1. 【Redis实现运行状态下切换RDB备份至AOF备份】

    redis持久化方式有哪些?又有何区别? rdb:基于快照的持久化,速度更快,一般用作备份,主从复制也是依赖于rdb持久化功能. aof:以追加的方式记录redis操作日志的文件,可最大程度的保证re ...

  2. 【Henu ACM Round #12 E】Thief in a Shop

    [链接] 我是链接,点我呀:) [题意] n个物品,每个物品都有无限个. 第i个物品的价格是一样都,都是ai 让你从中选出恰好k个物品 问你选出的物品的总价值 有多少种不同的可能. [题解] 可以用f ...

  3. 软件设计师必备——操作系统&#183;

    引子: 在今天,我们对于操作系统已经很熟悉,不论是微软的windows还是苹果的Mac OS X,包扩当先很流行的android都在操作系统范畴,而这些操作系统尽管各有各的特点,可是,作为总体,我们能 ...

  4. TRIZ系列-创新原理-31-多孔材料原理

    多孔材料原理的详细描写叙述例如以下:1)让物体变成多孔的.或者使用辅助的多孔部件(如插入,覆盖):2)假设一个物体已经是多孔了,那么事先往里面填充某种物质:这个原理提出的原因是,一般机械系统通常都是由 ...

  5. Lucene-全文索引

    近期接触了lucene,我想也有非常多人以前听过,于是带着好奇心,我開始对lucene进行了解,给我影响最深的是它非常多的应用了索引表,这个工具之所以快是就是由于大量引用到了索引表.今天仅仅说下我刚開 ...

  6. Android简单实现Socket通信,client连接server后,server向client发送文字数据

    案例实现的是简单的Socket通信,当client(Androidclient)连接到指定server以后,server向client发送一句话文字信息(你能够拓展其他的了) 先看一下服务端程序的实现 ...

  7. java一个月日历

    项目须要,获取当天之后的30天.并提示星期几(周几),写了一个工具类 /** * 计算日期时间 * @author shijing * 2015年8月10日下午2:16:09 * @param dat ...

  8. 再谈怎样以最简单的方法将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式

    今天review代码,看见某些大爷在将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式时仍然仅仅顾结果不注重过程,"大爷"咱能负点责任吗? 将泛型为St ...

  9. ubuntu-删除内核

    今天进入公司第一天,公司需要给电脑安装ubuntu,这个是由it部门帮忙安装的.但是,我不小心升级了内核版本,接下来就悲剧了,因为内核版本升级以后,直接导致了环境错误,很多公司内部使用的工具都不能用了 ...

  10. 关于HashMap

    总是觉得对HashMap很熟悉,但最近连续被问到几个关于它的问题,才发现它其实并不简单.这里对关于它的一些问题做个总结,也希望能够大家一个参考. 都知道它是基于hash值,可以进行常量时间消化的存储结 ...