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;
}
<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>