css如何制作链接

使用 <a> 标签创建链接

在 HTML 中，链接通过 <a> 标签定义，href 属性指定链接的目标地址。例如：

<a href="https://example.com">访问示例网站</a>

设置链接样式

通过 CSS 可以修改链接的默认外观，常见的状态包括：

• a:link：未访问的链接
• a:visited：已访问的链接
• a:hover：鼠标悬停时的链接
• a:active：被点击时的链接

示例代码：

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: green;
}

移除下划线

默认链接带下划线，可以通过 CSS 移除：

a {
  text-decoration: none;
}

修改光标形状

鼠标悬停时改变光标形状：

a:hover {
  cursor: pointer;
}

创建按钮式链接

通过 CSS 将链接样式设置为类似按钮：

a.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}

a.button:hover {
  background-color: #45a049;
}

HTML 中使用：

<a href="#" class="button">按钮链接</a>

响应式链接设计

确保链接在不同设备上表现良好：

a {
  font-size: 1rem;
  padding: 0.5em;
}

@media (max-width: 600px) {
  a {
    font-size: 0.9rem;
    padding: 0.3em;
  }
}