按钮式链接

来源:互联网 发布:excle导入进sql 编辑:程序博客网 时间:2024/04/29 07:52

1.

<pre name="code" class="html">.a{     display:block;   }

将链接从行内元素转换为块级元素,从而可以设置宽高度和背景

2.

大多数浏览器的默认字号是16像素,所以6.6em=16*6.6=105.6px同时1.4em=22.4px

3.

<pre name="code" class="html">a{         /* ...*/   height: 1.4em;     line-height: 1.4em;    }
将height与line-height的值设为相等,可以使按钮中的文本垂直居中。

<pre name="code" class="html">.a{         /* ...*/   text-align: center;   }

 text-align值为center可以使按钮中的文本水平居中。

4.

<pre name="code" class="html">.a{         /* ...*/   text-decoration: none;   }
去掉链接的下划线。

完整代码:

<pre name="code" class="html"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">a{display:block;width:6.6em;height: 1.4em;line-height: 1.4em;text-align: center;text-decoration: none;background: #CFE4B8;border:1px solid #DED6D6;}</style></head><body><a href="#">Buttom</a></body></html>



0 0
原创粉丝点击