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. Python的主要库

    本文在Creative Commons许可证下发布 市面上的分析工具大致分为两大类,菜单式的工具和命令行式的工具.前者适合于初学入门,类似于跟团旅游,提供了固定的路线.分析套路比较固定化,点几下鼠标就 ...

  2. 基于SVM的数据分类预測——意大利葡萄酒种类识别

    update:把程序源代码和数据集也附上http://download.csdn.net/detail/zjccoder/8832699 2015.6.24 --------------------- ...

  3. HTML标签大全(常用)

    转自:https://www.cnblogs.com/moije/p/6751624.html 文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种 ...

  4. OpenCV特征点检测——ORB特征

            ORB算法 目录(?)[+] 什么是ORB 如何解决旋转不变性 如何解决对噪声敏感的问题 关于尺度不变性 关于计算速度 关于性能 Related posts 什么是ORB 七 4 Ye ...

  5. 【习题 8-2 UVA-1610】Party Games

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 字符串排序后 显然是n/2-1和n/2这两个字符串进行比较. 设为a,b 找到第一个不相同的位置. 即0..i-1是相同的前缀,然后 ...

  6. Java基础学习总结(21)——常用正则表达式列表

    很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,包括校验数字.字符.一些特殊的需求等等.给自己留个 ...

  7. CODEVS——T2744 养鱼喂妹纸

    http://codevs.cn/problem/2744/ 时间限制: 1 s  空间限制: 64000 KB 题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Descr ...

  8. DIV+CSS两种盒子模型(W3C盒子与IE盒子)

    在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...

  9. 用openssl生成含有中文信息的证书

    openssl 支持 ASCII 和 UTF-8 两种编码,应该可以制作中文证书. 在生成证书签发申请时,当输入中文则 openssl 报错,这是因为当前输入的字符是 ANSI 本地编码格式,超出了 ...

  10. ReactJs 入门DEMO(转自别人)

    附件是分享的一些他人的ReactJs入门DEMO,以前版本使用的是JSXTransformer.js,新版的用browser.min.js替代了. DEMO 下载地址:http://files.cnb ...