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>