CSS连接状态样式改变及列表样式优化

最新推荐文章于 2024-04-19 12:52:58 发布

iheyu

最新推荐文章于 2024-04-19 12:52:58 发布

阅读量277

点赞数

分类专栏： html 文章标签： css 连接状态样式列表样式优化

本文链接：https://blog.csdn.net/iheyu/article/details/103402583

版权

本文详细介绍了如何使用CSS伪类定义链接<a>的四种状态：初始、已访问、鼠标悬停和点击状态。同时，针对列表样式进行了优化，包括调整字体大小、定制列表符号、插入图片以及实现图片与文字的布局调整。

摘要由CSDN通过智能技术生成

一.通过伪类定义<a>,的四种状态：

1.初始状态——>被访问状态——>鼠标移动状态——>点击状态;

a:link {
/*初始状态*/
}
a:visited {
  /*被访问状态*/
}
a:hover {
  /*鼠标移动状态*/
}
a:active {
  /*点击状态*/
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>连接</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <a href="#1">这是第一个连接</a>
    <br>
    <br>
    <a href="#12">这是第二个连接</a>
</body>
</html>