页脚源码

页脚源码

HTML

1. <div class="footer">
   
2.     <div class="footer-content">
   
3.         <div class="footer-section">
   
4.             <h4>导航</h4>
   
5.             <ul>
   
6.                 <li><a href="index.php">首页</a></li>
   
7.                 <li><a href="forum.php">论坛</a></li>
   
8.                 <li><a href="group.php">群组</a></li>
   
9.                 <li><a href="portal.php">门户</a></li>
   
10.             </ul>
    
11.         </div>
    
12.         <div class="footer-section">
    
13.             <h4>关于我们</h4>
    
14.             <ul>
    
15.                 <li><a href="about.php">关于我们</a></li>
    
16.                 <li><a href="contact.php">联系我们</a></li>
    
17.                 <li><a href="terms.php">服务条款</a></li>
    
18.                 <li><a href="privacy.php">隐私政策</a></li>
    
19.             </ul>
    
20.         </div>
    
21.         <div class="footer-section">
    
22.             <h4>社交</h4>
    
23.             <ul>
    
24.                 <li><a href="https://www.facebook.com/yourpage" target="_blank">Facebook</a></li>
    
25.                 <li><a href="https://www.twitter.com/yourpage" target="_blank">Twitter</a></li>
    
26.                 <li><a href="https://www.instagram.com/yourpage" target="_blank">Instagram</a></li>
    
27.             </ul>
    
28.         </div>
    
29.     </div>
    
30.     <div class="footer-bottom">
    
31.         <p>&copy; 2025 <a href="index.php">{sitename}</a> 版权所有</p>
    
32.         <p>技术支持：<a href="https://www.discuz.net" target="_blank">Discuz!</a></p>
    
33.     </div>
    
34. </div>

复制代码

CSS

1. .footer {
   
2.     background-color: #f5f5f5;
   
3.     padding: 20px 0;
   
4.     color: #333;
   
5.     font-size: 14px;
   
6. }
   
7. 
   
8. .footer-content {
   
9.     display: flex;
   
10.     justify-content: space-around;
    
11.     align-items: flex-start;
    
12.     padding: 0 20px;
    
13. }
    
14. 
    
15. .footer-section h4 {
    
16.     font-size: 16px;
    
17.     margin-bottom: 10px;
    
18. }
    
19. 
    
20. .footer-section ul {
    
21.     list-style: none;
    
22.     padding: 0;
    
23. }
    
24. 
    
25. .footer-section ul li {
    
26.     margin-bottom: 5px;
    
27. }
    
28. 
    
29. .footer-section ul li a {
    
30.     color: #333;
    
31.     text-decoration: none;
    
32.     transition: color 0.3s ease;
    
33. }
    
34. 
    
35. .footer-section ul li a:hover {
    
36.     color: #007bff;
    
37. }
    
38. 
    
39. .footer-bottom {
    
40.     text-align: center;
    
41.     padding: 10px 0;
    
42.     border-top: 1px solid #ddd;
    
43. }
    
44. 
    
45. .footer-bottom p {
    
46.     margin: 0;
    
47. }

复制代码