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,就是让不同浏览器显示相同的样式 ...
随机推荐
- 【Django】安装及配置
目录 MVC框架与MTV框架 Django的MTV模式 Django框架图示 安装及配置 创建一个Django项目 目录介绍 运行Django项目 启动Django报错 模版文件配置 静态文件配置 A ...
- JAVA基础实例(二)
1.做一个饲养员给动物喂食物的样例体现JAVA中的面向对象思想,接口(抽象类)的用处 package com.softeem.demo; /** *@authorleno *动物的接口 */ inte ...
- 创建maven项目pom.xml出现错误(依赖Missing)
Maven的依赖问题 在聚合模块时候,发现在父工程目录中的依赖存在一些问题.一开始是${pagehelper.version},后来将版本直接填写相应的版本如图下 依赖添加失败 * 在父工程的jar包 ...
- SQLite详解,案例,手册
SQLite 存储类型 1.NULL 2.INTEGER 3.REAL 4.TEXT 5.BLOB 创建表 CREATE TABLE COMPANY( ID INT PRIMARY KEY NOT N ...
- C#结构函数
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Redis安装以及配置
下载 http://redis.io/download 解压 tar zxvf redis-2.8.17.tar.gz 编译并安装 1 2 3 4 cd redis-2.8.17 make cd sr ...
- 62.nodejs中的ejs模板学习
转自:https://blog.csdn.net/dongmelon/article/details/72403913 02.ejs.这是被include的文件 <script> cons ...
- single-page关于vue-router
最近复习了vue,项目实战前有练手,做一个简单的单页面应用. 1.router-view就是我们渲染的组件,router-view被包裹在一个div中,一旦路由跳转,router-view就会被渲染为 ...
- 关于 js 的框架方向
关于 js 的框架方向 http://www.breck-mckye.com/blog/2014/12/the-state-of-javascript-in-2015/?utm_source=ourj ...
- POJ 1279 Art Gallery 半平面交/多边形求核
http://poj.org/problem?id=1279 顺时针给你一个多边形...求能看到所有点的面积...用半平面对所有边取交即可,模版题 这里的半平面交是O(n^2)的算法...比较逗比.. ...