首页 > 代码库 > DIV+CSS布局重新学习之使用A标签和CSS制作按钮

DIV+CSS布局重新学习之使用A标签和CSS制作按钮

2024-07-09 23:14:32   225人阅读

这里主要利用A元素的伪类来实现：

a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">a {     display: block;     height: 34px;     width: 107px;     line-height: 2;     text-align: center;     background: yellow;     color: #d84700;     font-size: 14px;     font-weight: bold;     text-decoration: none;     padding-top: 3px; }a:hover { background: green;}</style></head></p><p><body><p><a href="http://www.mamicode.com/#">免费注册</a></p></body></html>

在给a设置背景的时候使用图片能达到很好的效果，这里是做例子就使用一个单纯的背景色。

效果如下：

鼠标移动到“按钮”后的效果：


联系
我们