CSS3学习笔记3-CSS3伪标签样式

最新推荐文章于 2024-07-18 17:34:14 发布

糯米味儿的粽子

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量307

点赞数 1

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/emmm520/article/details/119723207

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS学习笔记3——CSS3伪标签样式

a标签

a标签为链接接标签，可以实现很多网站的导航效果，使用方法如下：

<a href="https://www.baidu.com">百度</a>

伪类样式

a: link:未访问时的链接样式
a:hover：鼠标悬停到链接部分时的样式
a:visited：访问后的链接样式
a:active：鼠标单击未释放的超链接样式

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css伪类样式</title>
	<style type="text/css">

		a:hover{
			color: red;
			font-style: italic;
		}

	</style>
</head>
<body>
	<table>
		<tr>
			<td><img src="./images/1.jpg"></td>
			<td><img src="./images/2.jpg"></td>
			<td><img src="./images/3.png"></td>
		</tr>
		<!-- text-align属性规定元素中的文本的水平对齐方式 -->
		<tr style="text-align:center">
			<td><a href="https://www.baidu.com/s?ie=UTF-8&wd=%E7%8C%B4%E5%AD%90">猴子</a></td>
			<td><a href="https://www.baidu.com/s?ie=UTF-8&wd=%E6%89%93%E4%BC%9E%E7%9A%84%E7%8C%AB">打伞的猫</a></td>
			<td><a href="https://www.baidu.com/s?ie=UTF-8&wd=%E5%93%86%E5%95%A6A%E6%A2%A6">哆啦A梦</a></td>
		</tr>
	</table>
</body>
</html>

演示效果如图：

浏览器中打开html文件：
在这里插入图片描述

鼠标悬停到链接部分：
在这里插入图片描述

糯米味儿的粽子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记3-CSS3伪标签样式

CSS学习笔记3——CSS3伪标签样式a标签a标签为链接接标签，可以实现很多网站的导航效果，使用方法如下：<a href="https://www.baidu.com">百度</a>伪类样式a: link:未访问时的链接样式a:hover：鼠标悬停到链接部分时的样式a:visited：访问后的链接样式a:active：鼠标单击未释放的超链接样式案例演示<!DOCTYPE html><html lang="en"><head&g
复制链接

扫一扫