amazeui学习笔记--css(HTML元素2)--代码Code
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>
参考链接
轻量级的代码高亮插件
amazeui学习笔记--css(HTML元素2)--代码Code的更多相关文章
- amazeui学习笔记--css(HTML元素4)--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- amazeui学习笔记--css(HTML元素5)--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- amazeui学习笔记--css(HTML元素3)--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- amazeui学习笔记--css(HTML元素1)--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
随机推荐
- i2c tools 使用
1.查询罗列出I2C的控制器总线数目 # i2cdetect -l i2c-0 i2c OMAP I2C adapter I2C adapter i2c-1 i2c OMAP I2C adapter ...
- Java并发包之Semaphore用法
多线程中的同步概念就是排着队去执行一个任务,执行任务的是一个一个的执行,并不能并行执行,这样的优点是有助于程序逻辑的正确性,不会出现线程安全问题,保证软件的系统功能上的运行稳定性, Semaphore ...
- flex RemoteObject 的两种使用方法
这里使用的是django1.6 和 postgreSQL9.0 FlashBuilder4.5 django方面就不说了,根据文档来做,建好模块,配置好数据库等等 创建 gateway 和 time ...
- log4j小结
核心包: org.apache.log4j 三大组件 Loggers 日志操作 Appenders 日志的展现形式 Layouts 日志的展现格式 日志等级 TRACE DEBUG INFO WARN ...
- js正則表達式--验证表单
检測手机号码:/0? (13|14|15|18)[0-9]{9}/ 检測username:(数字,英文,汉字.下划线.中横线):/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/ pas ...
- package-判断安装应用是否存在
今天在修改一个bug的时候,遇到一个问题,就是一个应用卸载了以后,在超级用户权限界面仍然会加载进来这个应用的相关信息.自己修改的时候,为了方便,就直接使用了里面一个加载图标的代码作为条件,也就是说,如 ...
- Redhat Linux下如何使用KVM虚拟机(视频)
KVM(kernel-basedVirtualMachine)是一个开源的系统虚拟化模块,自Linux2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器进行管理,所以相 ...
- button按钮下边框有立体效果样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Sparse Coding: Autoencoder Interpretation
稀疏编码 在稀疏自编码算法中,我们试着学习得到一组权重参数 W(以及相应的截距 b),通过这些参数可以使我们得到稀疏特征向量 σ(Wx + b) ,这些特征向量对于重构输入样本非常有用. 稀疏编码可以 ...
- JOISC 2017 Day1 T3 烟花棒
JOISC 2017 Day1 T3 烟花棒 题意: 数轴上有\(N\)人在放烟花,一开始只有第\(K\)个人的烟花是点燃的,烟花燃烧的时间为\(T\)秒,求让所有人的烟花都可以点燃的速度的最小值 ...