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

2024-05-29 06:56:51

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

一、总结

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

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

3、带边框样式：添加 .am-close-alt class。 <a href="" class="am-close am-close-alt">×</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

目录

基本样式
带边框样式
- 使用 x
- 使用 Icon Font
- 垂直居中思密达
hover 旋转

关闭按钮样式，可以结合其他不同组件使用。对 <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>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9011772.html

amazeui学习笔记--css（常用组件4）--关闭按钮Close相关推荐

amazeui学习笔记--css（常用组件1）--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
amazeui学习笔记--css（常用组件5）--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
amazeui学习笔记--css（HTML元素2）--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

最新文章

热门文章