好看的页脚

好看的页脚

1. <div class="comiis_footer">
   
2. <div id="ft" class="wp comiis_bottom wlnw">
   
3. <div id="frt">
   
4. <p class="km_fnv"><span class="pipe">|</span><a href="javascript:;"  onclick="showWindow('miscreport', 'misc.php?mod=report&url='+REPORTURL);return false;">举报</a><span class="pipe">|</span><a href="archiver/" >Archiver</a><span class="pipe">|</span><a href="forum.php?showmobile=yes" >手机版</a><span class="pipe">|</span><a href="forum.php?mod=misc&action=showdarkroom" >小黑屋</a>
   
5. </p>
   
6. </div>
   
7. <div class="comiis_demail">
   
8. <p><em>投诉/建议联系邮箱</em></p><a href="mailto:kefu@foxccs.com" rel="nofollow">kefu@foxccs.com</a>
   
9. </div>
   
10. 
    
11. <ul class="comiis_dico">
    
12.     <li>
    
13.         <a href="javascript:;"  title="微信公众号">
    
14.             <img src="{IMGDIR}/ewm_a.jpg" class="vm">
    
15.         </a>
    
16.         <div class="comiis_icon_name">微信公众号</div>
    
17.     </li>
    
18.     <li>
    
19.         <a href="javascript:;" title="官方微博">
    
20.             <img src="{IMGDIR}/ewm_b.jpg" class="vm">
    
21.         </a>
    
22.         <div class="comiis_icon_name">官方微博</div>
    
23.     </li>
    
24.     <li>
    
25.         <a href="javascript:;" title="官方抖音号">
    
26.             <img src="{IMGDIR}/ewm_b.jpg" class="vm">
    
27.         </a>
    
28.         <div class="comiis_icon_name">官方抖音号</div>
    
29.     </li>
    
30. </ul>
    
31. </div>
    
32. </div>
    
33. 
    
34. <style>
    
35. /* 整体容器样式 */
    
36. .comiis_footer {
    
37.     width: 100%;
    
38.     background-color: #f2f2f2; /* 浅灰色背景 */
    
39.     padding: 15px 0;
    
40.     border-top: 1px solid #ddd; /* 顶部细边框 */
    
41.     box-sizing: border-box;
    
42. }
    
43. 
    
44. /* 底部内容区域 */
    
45. #ft {
    
46.     width: 1200px; /* 假设最大宽度为1200px，可根据实际需求修改 */
    
47.     margin: 0 auto; /* 水平居中 */
    
48.     display: flex;
    
49.     justify-content: space-between; /* 子元素两端对齐 */
    
50.     align-items: center; /* 垂直居中 */
    
51. }
    
52. 
    
53. /* 底部链接区域 */
    
54. .km_fnv {
    
55.     display: flex;
    
56.     align-items: center;
    
57. }
    
58. 
    
59. .km_fnv a {
    
60.     color: #333; /* 链接文字颜色 */
    
61.     text-decoration: none; /* 去掉下划线 */
    
62.     margin: 0 10px; /* 链接间间距 */
    
63. }
    
64. 
    
65. .km_fnv a:hover {
    
66.     text-decoration: underline; /* 鼠标悬停时下划线 */
    
67. }
    
68. 
    
69. .pipe {
    
70.     color: #999; /* 分隔符颜色 */
    
71.     margin: 0 0px; /* 分隔符间距 */
    
72. }
    
73. 
    
74. /* 投诉建议联系微信区域 */
    
75. .comiis_demail {
    
76.     display: flex;
    
77.     flex-direction: column; /* 子元素上下排列 */
    
78.     align-items: flex-start; /* 子元素起始端对齐 */
    
79.     justify-content: center; /* 子元素居中对齐 */
    
80. }
    
81. 
    
82. .comiis_demail p {
    
83.     margin: 0 0 5px 0; /* 调整与下方链接的间距 */
    
84.     color: #666; /* 文字颜色 */
    
85.     font-size: 14px; /* 字体大小 */
    
86. }
    
87. 
    
88. .comiis_demail a {
    
89.     color: #007bff; /* 微信链接颜色 */
    
90.     text-decoration: none; /* 去掉下划线 */
    
91. }
    
92. 
    
93. .comiis_demail a:hover {
    
94.     text-decoration: underline; /* 鼠标悬停时下划线 */
    
95. }
    
96. 
    
97. /* 社交媒体图标列表区域 */
    
98. .comiis_dico {
    
99.     list-style: none; /* 去掉列表默认样式 */
    
100.     padding: 0;
     
101.     display: flex;
     
102.     align-items: center;
     
103. }
     
104. 
     
105. .comiis_dico li {
     
106.     display: flex;
     
107.     flex-direction: column; /* 子元素上下排列 */
     
108.     align-items: center; /* 子元素居中对齐 */
     
109.     margin-left: 10px; /* 图标间距 */
     
110. }
     
111. 
     
112. .comiis_dico a {
     
113.     display: inline-block;
     
114. }
     
115. 
     
116. /* 图片样式，添加圆角效果 */
     
117. .comiis_dico .vm {
     
118.     width: 80px; /* 图片大小，可根据实际图标尺寸调整 */
     
119.     height: 80px;
     
120.     border-radius: 8px; /* 添加圆角效果 */
     
121. }
     
122. 
     
123. /* 图标名称样式 */
     
124. .comiis_icon_name {
     
125.     margin-top: 5px; /* 与图标间距 */
     
126.     color: #666; /* 文字颜色 */
     
127.     font-size: 12px; /* 字体大小 */
     
128. }
     
129. </style>

复制代码

感谢楼主分享！

楼主，这个是放哪个位置？

梦淡如非 发表于 2025-1-15 09:17
楼主，这个是放哪个位置？

footer 文件里面，把原来的 注释掉

aoki 发表于 2025-1-15 12:19
footer 文件里面，把原来的 注释掉

咋跟你的不一样啊？

梦淡如非 发表于 2025-1-15 13:43
咋跟你的不一样啊？

我又重新写了一个

aoki 发表于 2025-1-15 15:01
我又重新写了一个

把你重新写了的分享一下吧，哈哈。

梦淡如非 发表于 2025-1-15 15:18
把你重新写了的分享一下吧，哈哈。

发了