页脚源码

aoki 发表于 2025-1-23 14:13:50

HTML
<div class="footer">
<div class="footer-content">
   <div class="footer-section">
         <h4>导航</h4>
         <ul>
            <li><a href="index.php">首页</a></li>
            <li><a href="forum.php">论坛</a></li>
            <li><a href="group.php">群组</a></li>
            <li><a href="portal.php">门户</a></li>
         </ul>
   </div>
   <div class="footer-section">
         <h4>关于我们</h4>
         <ul>
            <li><a href="about.php">关于我们</a></li>
            <li><a href="contact.php">联系我们</a></li>
            <li><a href="terms.php">服务条款</a></li>
            <li><a href="privacy.php">隐私政策</a></li>
         </ul>
   </div>
   <div class="footer-section">
         <h4>社交</h4>
         <ul>
            <li><a href="https://www.facebook.com/yourpage" target="_blank">Facebook</a></li>
            <li><a href="https://www.twitter.com/yourpage" target="_blank">Twitter</a></li>
            <li><a href="https://www.instagram.com/yourpage" target="_blank">Instagram</a></li>
         </ul>
   </div>
</div>
<div class="footer-bottom">
   <p>© 2025 <a href="index.php">{sitename}</a> 版权所有</p>
   <p>技术支持：<a href="https://www.discuz.net" target="_blank">Discuz!</a></p>
</div>
</div>CSS
.footer {
background-color: #f5f5f5;
padding: 20px 0;
color: #333;
font-size: 14px;
}

.footer-content {
display: flex;
justify-content: space-around;
align-items: flex-start;
padding: 0 20px;
}

.footer-section h4 {
font-size: 16px;
margin-bottom: 10px;
}

.footer-section ul {
list-style: none;
padding: 0;
}

.footer-section ul li {
margin-bottom: 5px;
}

.footer-section ul li a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}

.footer-section ul li a:hover {
color: #007bff;
}

.footer-bottom {
text-align: center;
padding: 10px 0;
border-top: 1px solid #ddd;
}

.footer-bottom p {
margin: 0;
}

页: [1]

3BBS's Archiver

页脚源码