1.使用 CSS 伪类别来设置超链接样式
链接的四种状态：
a:link：普通的、未被访问的链接
a:visited：用户已访问的链接
a:hover：鼠标指针位于链接的上方
a:active：链接被点击的时刻
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><a href="www.baidu.com">百度</a></body></html>
复制代码
运行结果：
默认效果是蓝色，且带有下划线；
1.1 普通的、未被访问的链接
a:link：普通的、未被访问的链接
运行结果：
1.2 用户已访问的链接
a:visited：用户已访问的链接
我们刚刚访问过的链接，访问之后就是这种颜色：
运行结果：
可以看到颜色已经发生变化；
1.3 鼠标指针位于链接的上方
a:hover：鼠标指针位于链接的上方
运行结果：
完整代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> /* 普通的、未被访问的链接 */ a:LINK{ color:red; text-decoration: none; } /* 用户已访问过的链接 */ a:VISITED { color:yellow; text-decoration: none; } /* 鼠标指针位于链接的上方 */ a:HOVER { background-color: blue; text-decoration: none; }</style></head><body><a href="https://www.baidu.com">百度</a></body></html>
复制代码
2.创建按钮式超链接
2.1 设置三个超链接（默认格式）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><a href="www.1234.com">java</a><a href="www.1234.com">c</a><a href="www.1234.com">php</a></body></html>
复制代码
运行结果：
2.2 设置超链接的边距和字体格式
运行结果：
2.3 设置类似于按钮格式的超链接
这里要用到盒子模型，将盒子做成一个按钮格式的样子；
运行结果：
这里已经有点像按钮了；
2.4 设置点击按钮后的动态效果
这里还要设置一下当点击按钮之后发生的效果：
运行结果：
可以明显地看到当鼠标点击 php 时，它与其他两个按钮明显发生了变化！
完整代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> /* 首先设置body的边距 */ body{ margin: 20px; } /* 设置超链接的字体和边距 */ a{ font-family: Arial; margin: 5px; } /* 设置类似于按钮格式的超链接 */ a:LINK,a:VISITED { color:#A62020; padding:4px 10px 4px 10px; background-color:#DDD; text-decoration: none; border-top: 1px solid #EEEEEE; border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } /* 设置点击按钮之后的动态效果 */ a:HOVER { color: #821818; padding: 5px 8px 3px 12px; background-color: #CCC; border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; }</style></head><body><a href="www.1234.com">java</a><a href="www.1234.com">c</a><a href="www.1234.com">php</a></body></html>
复制代码
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论