amazeui学习笔记--css(常用组件4)--关闭按钮Close

一、总结

1、关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用。对 <a> 或者 <button> 添加 .am-close class。<a href="#" class="am-close">&times;</a>

2、&times:关闭按钮用到的那个叉叉是&times,如果是icon font则不用

3、带边框样式:添加 .am-close-alt class。 <a href="" class="am-close am-close-alt">&times;</a>

4、使用icon font(这个好):<a href="" class="am-close am-close-alt am-icon-times"></a>

5、hover选择效果(这个也好):添加 .am-close-spin class(需支持 CSS3 transform)。<a href="" class="am-close am-close-alt am-close-spin am-icon-times"></a>

二、关闭按钮Close

Close


关闭按钮样式,可以结合其他不同组件使用。对 <a> 或者 <button> 添加 .am-close class。

基本样式

在元素上添加 .am-close class。

 Copy
×
×
<a href="#" class="am-close">&times;</a>

<button type="button" class="am-close">&times;</button>

带边框样式

添加 .am-close-alt class。

使用 x

 Copy
<a href="" class="am-close am-close-alt">&times;</a>

使用 Icon Font

 Copy
 
<a href="" class="am-close am-close-alt am-icon-times"></a>

垂直居中思密达

这个问题有点头疼,不同字体对齐方式有差异,很难做到所有字体都垂直居中。现在增加了使用 Icon Font 样式(貌似还行,看得我眼睛都眨巴了),大家如果有好的解决方案也可以提供给我们。

hover 旋转

添加 .am-close-spin class(需支持 CSS3 transform)。

 Copy
× 
<a href="" class="am-close am-close-alt am-close-spin">&times;</a>
<a href="" class="am-close am-close-alt am-close-spin am-icon-times"></a>

amazeui学习笔记--css(常用组件4)--关闭按钮Close的更多相关文章

  1. amazeui学习笔记--css(常用组件16)--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  2. amazeui学习笔记--css(常用组件15)--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  3. amazeui学习笔记--css(常用组件14)--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  4. amazeui学习笔记--css(常用组件13)--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  5. amazeui学习笔记--css(常用组件12)--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  6. amazeui学习笔记--css(常用组件11)--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

  7. amazeui学习笔记--css(常用组件10)--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  8. amazeui学习笔记--css(常用组件9)--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  9. amazeui学习笔记--css(常用组件8)--列表list

    amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...

随机推荐

  1. Xcode Git 客户端 + GitBucket 服务器 使用整合归纳

    1.使用前说明: 不知道XCode,Git的请自行度娘,不知道GitBucket的,可参考文章:git 私服搭建-gitbucket 初试牛刀 2.创建Git步骤 1>在gitbucket创建账 ...

  2. TI Code Composer Studio MSP430系列驱动源代码

    一.参考TI官网驱动源代码 安装打开Code Composer Studio,如下图所示,最近在调试MSP430G2533的AD,需要参考官网的底层驱动配置. 从Code Composer Studi ...

  3. LRJ入门经典-0907万圣节的小L306

    原题 LRJ入门经典-0907万圣节的小L306 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 今天是万圣节,小L同学开始了 ...

  4. 57.C++处理转义字符

    #include <iostream> #include <string> #include <cstdlib> using namespace std; void ...

  5. POJ 3049 DFS

    思路:暴搜 //By SiriusRen #include <cstdio> #include <iostream> #include <algorithm> us ...

  6. mapper.xml中的常用标签

    mybatis的mapper xml文件中的常用标签 https://blog.csdn.net/qq_41426442/article/details/79663467 SQL语句标签 1.查询语句 ...

  7. Linux-PS1变量详解

    1.PS1 要修改linux终端命令行颜色,我们需要用到PS1,PS1是Linux终端用户的一个环境变量,用来说明命令行提示符的设置.在终端输入命令:#set,即可在输出中找到关于PS1的定义如下: ...

  8. 【hihocoder 1378】网络流二·最大流最小割定理

    [Link]:http://hihocoder.com/problemset/problem/1378 [Description] [Solution] 在求完最小割(最大流)之后; 可以在剩余网络中 ...

  9. [Python] String Formatting

    One particularly useful string method is format. The format method is used to construct strings by i ...

  10. [Docker 官方文档] 理解 Docker

    http://segmentfault.com/a/1190000002609286 什么是 Docker? Docker 是一个用于开发.交付和执行应用的开放平台,Docker 设计用来更快的交付你 ...