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

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

---

目录

• 基本样式
• 带边框样式
  • 使用 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>