帮我写一段html代码,在一个矩形中包含二十个文字链接,每个链接前面有一个图标,,每行5个链接,排列要对齐。矩形要用绿色线条
时间: 2024-06-11 09:10:23 浏览: 13
以下是一个例子,你可以根据需要进行修改:
```html
<div style="border: 1px solid green; padding: 10px; width: 300px;">
<div style="display: flex; flex-wrap: wrap;">
<a href="#"><img src="icon1.png" alt="Icon 1">Link 1</a>
<a href="#"><img src="icon2.png" alt="Icon 2">Link 2</a>
<a href="#"><img src="icon3.png" alt="Icon 3">Link 3</a>
<a href="#"><img src="icon4.png" alt="Icon 4">Link 4</a>
<a href="#"><img src="icon5.png" alt="Icon 5">Link 5</a>
<a href="#"><img src="icon6.png" alt="Icon 6">Link 6</a>
<a href="#"><img src="icon7.png" alt="Icon 7">Link 7</a>
<a href="#"><img src="icon8.png" alt="Icon 8">Link 8</a>
<a href="#"><img src="icon9.png" alt="Icon 9">Link 9</a>
<a href="#"><img src="icon10.png" alt="Icon 10">Link 10</a>
<a href="#"><img src="icon11.png" alt="Icon 11">Link 11</a>
<a href="#"><img src="icon12.png" alt="Icon 12">Link 12</a>
<a href="#"><img src="icon13.png" alt="Icon 13">Link 13</a>
<a href="#"><img src="icon14.png" alt="Icon 14">Link 14</a>
<a href="#"><img src="icon15.png" alt="Icon 15">Link 15</a>
<a href="#"><img src="icon16.png" alt="Icon 16">Link 16</a>
<a href="#"><img src="icon17.png" alt="Icon 17">Link 17</a>
<a href="#"><img src="icon18.png" alt="Icon 18">Link 18</a>
<a href="#"><img src="icon19.png" alt="Icon 19">Link 19</a>
<a href="#"><img src="icon20.png" alt="Icon 20">Link 20</a>
</div>
</div>
```
在上面的代码中,我们使用了一个 `div` 元素来创建矩形,并使用 `border` 属性来添加绿色线条。我们使用了一个 `display: flex` 的样式来让链接水平排列,并使用了 `flex-wrap` 属性来让它们在需要的时候换行。每个链接都包含一个图标和一个文本,我们使用了 `img` 元素来添加图标,并使用了 `alt` 属性来提供一个替代文本。你可以将图标的 `src` 属性替换为你自己的图标路径。如果你需要添加更多的链接,只需复制并粘贴现有的链接,并进行必要的修改。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)