美化版友链代码

小乐

代码如下:

1.     <!-- 引入Font Awesome图标库 -->
   
2.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
   
3.     <style>
   
4.         @media (min-width: 1200px) {
   
5.             .center-table {
   
6.                 width: 80%; /* 大屏幕时，表格宽度为80% */
   
7.             }
   
8.         }
   
9. 
   
10.         @media (max-width: 1199px) {
    
11.             .center-table {
    
12.                 width: 90%; /* 中等屏幕时，表格宽度为90% */
    
13.             }
    
14.         }
    
15. 
    
16.         .center-table {
    
17.             width: 100%; /* 默认情况下，表格宽度为100% */
    
18.             max-width: 980px; /* 设置最大宽度限制 */
    
19.             margin: 0 auto; /* 水平居中 */
    
20.         }
    
21. 
    
22.         hr {
    
23.             margin-top: 10px; /* 增加上边距 */
    
24.             margin-bottom: 10px; /* 增加下边距 */
    
25.         }
    
26. 
    
27.         /* 为图标添加样式 */
    
28.         .link-icon {
    
29.             margin-right: 8px; /* 图标和文字之间的间距 */
    
30.         }
    
31. 
    
32.         /* 去掉超链接的下划线并设置字体颜色为黑色 */
    
33.         a {
    
34.             text-decoration: none; /* 去掉下划线 */
    
35.             color: black; /* 设置字体颜色为黑色 */
    
36.         }
    
37.     </style>
    
38.     <div class="row row-BdBabf">
    
39.         <div class="col-lg-12">
    
40.             <div class="card card-html-BdBabf">
    
41.                 <div class="card-block">
    
42.                     <div align="center">
    
43.                         <table class="center-table" border="0" align="center">
    
44.                             <tr>
    
45.                                 <td>
    
46.                                     <!-- 添加图标和友情链接文字 -->
    
47.                                     <i class="fas fa-link link-icon"></i>友情链接  <br><hr>
    
48.                                     <a target="_blank" href="http://www.example-one.com">One</a>
    
49.                                     | 
    
50.                                     <a target="_blank" href="http://www.example-two.com">Two</a>
    
51.                                     | 
    
52.                                     <a target="_blank" href="http://www.example-three.com">Three</a>
    
53.                                 </a>
    
54.                             </tr>
    
55.                         </table>
    
56.                     </div>
    
57.                 </div>
    
58.             </div>
    
59.         </div>
    
60.     </div>

复制代码