按鈕式鏈接

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>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章