html代码,先写一条分割线,分割线用绿色淡出效果,再写20个链接,每行5个,共计四行,每个链接前面要由一个图标
时间: 2024-05-22 15:16:05 浏览: 8
<!DOCTYPE html>
<html>
<head>
<title>分割线和链接</title>
<style>
hr {
border: none;
height: 2px;
background-color: green;
width: 100%;
animation: fadeOut 2s ease-in-out;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
flex-basis: calc(20% - 20px);
margin-bottom: 20px;
display: flex;
align-items: center;
}
li img {
margin-right: 10px;
}
li a {
font-size: 18px;
color: black;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
li a:hover {
color: green;
}
</style>
</head>
<body>
<hr>
<ul>
<li><img src="icon1.png"><a href="#">链接1</a></li>
<li><img src="icon2.png"><a href="#">链接2</a></li>
<li><img src="icon3.png"><a href="#">链接3</a></li>
<li><img src="icon4.png"><a href="#">链接4</a></li>
<li><img src="icon5.png"><a href="#">链接5</a></li>
<li><img src="icon6.png"><a href="#">链接6</a></li>
<li><img src="icon7.png"><a href="#">链接7</a></li>
<li><img src="icon8.png"><a href="#">链接8</a></li>
<li><img src="icon9.png"><a href="#">链接9</a></li>
<li><img src="icon10.png"><a href="#">链接10</a></li>
<li><img src="icon11.png"><a href="#">链接11</a></li>
<li><img src="icon12.png"><a href="#">链接12</a></li>
<li><img src="icon13.png"><a href="#">链接13</a></li>
<li><img src="icon14.png"><a href="#">链接14</a></li>
<li><img src="icon15.png"><a href="#">链接15</a></li>
<li><img src="icon16.png"><a href="#">链接16</a></li>
<li><img src="icon17.png"><a href="#">链接17</a></li>
<li><img src="icon18.png"><a href="#">链接18</a></li>
<li><img src="icon19.png"><a href="#">链接19</a></li>
<li><img src="icon20.png"><a href="#">链接20</a></li>
</ul>
</body>
</html>
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)