高级 - 创建链接框 - 这个例子演示了一个更高级的例子，我们结合若干CSS属性显示为方框。 - 在线编辑器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    a:link,
    a:visited {
      display: block;
      font-weight: bold;
      color: #FFFFFF;
      background-color: #98bf21;
      width: 120px;
      text-align: center;
      padding: 4px;
      text-decoration: none;
    }

    a:hover,
    a:active {
      background-color: #7A991A;
    }
  </style>
</head>

<body>
  <a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>
​x
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    a:link,
    a:visited {
      display: block;
      font-weight: bold;
      color: #FFFFFF;
      background-color: #98bf21;
      width: 120px;
      text-align: center;
      padding: 4px;
      text-decoration: none;
    }
​
    a:hover,
    a:active {
      background-color: #7A991A;
    }
  </style>
</head>
​
<body>
  <a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>