文、意如
程式碼參考:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁腳範本</title>
<link rel="stylesheet" href="styles.css"> </head>
<style>
/* 基本重置與通用樣式 */
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh; /* 讓 footer 保持在頁面底部 */
}
main {
flex-grow: 1; /* 讓主要內容區域填充剩餘空間 */
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: inherit; /* 繼承父元素的顏色 */
}
a:hover {
text-decoration: underline;
}
/* 頁腳樣式 */
.site-footer {
background-color: #333;
color: #fff;
padding: 40px 20px 20px;
border-top: 5px solid #007bff; /* 一條藍色邊線，增加設計感 */
}
.footer-container {
display: flex;
flex-wrap: wrap; /* 讓區塊在小螢幕上換行 */
justify-content: space-around; /* 讓區塊分佈更均勻 */
max-width: 1200px; /* 限制最大寬度 */
margin: 0 auto; /* 居中對齊 */
gap: 30px; /* 區塊之間的間距 */
}
.footer-section {
flex: 1; /* 讓每個區塊平均分配空間 */
min-width: 250px; /* 最小寬度，避免在小螢幕下過窄 */
margin-bottom: 20px; /* 區塊底部間距 */
}
.footer-section h3 {
color: #007bff;
margin-top: 0;
margin-bottom: 15px;
font-size: 1.2em;
}
.footer-section p, .footer-section li {
font-size: 0.9em;
line-height: 1.6;
margin-bottom: 8px;
}
.footer-section ul li a {
color: #ccc;
transition: color 0.3s ease; /* 平滑過渡效果 */
}
.footer-section ul li a:hover {
color: #fff;
text-decoration: none;
}
/* 頁腳底部版權和社群連結 */
.footer-bottom {
text-align: center;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid #555;
font-size: 0.8em;
display: flex;
flex-direction: column; /* 預設垂直排列 */
align-items: center;
justify-content: center;
}
.footer-bottom p {
margin-bottom: 10px;
}
.social-links a {
margin: 0 10px;
display: inline-block; /* 確保圖片正確顯示 */
}
.social-links img {
width: 24px;
height: 24px;
border-radius: 4px; /* 輕微圓角 */
vertical-align: middle; /* 垂直對齊 */
}
/* 響應式調整 */
@media (max-width: 768px) {
.footer-container {
flex-direction: column; /* 在小螢幕上垂直堆疊 */
align-items: center; /* 居中對齊 */
}
.footer-section {
min-width: unset; /* 移除最小寬度限制 */
width: 90%; /* 佔據較大寬度 */
text-align: center;
}
.footer-bottom {
flex-direction: column; /* 保持垂直堆疊 */
}
}
@media (max-width: 480px) {
.site-footer {
padding: 30px 15px 15px;
}
.footer-section h3 {
font-size: 1.1em;
}
.footer-section p, .footer-section li {
font-size: 0.85em;
}
}
</style>
<body>
<main style="min-height: 50vh; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0;">
<h1>主要內容區域</h1>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-section about-us">
<h3>關於我們</h3>
<p>我們致力於提供優質的服務與產品，滿足客戶的需求。了解更多我們的故事。</p>
</div>
<div class="footer-section quick-links">
<h3>快速連結</h3>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
</div>
<div class="footer-section contact-info">
<h3>聯絡資訊</h3>
<p>地址：台北市大安區範本路123號</p>
<p>電話：(02) 1234-5678</p>
<p>Email：info@example.com</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 [您的公司名稱]. 版權所有。</p>
<div class="social-links">
<a href="#" aria-label="Facebook"><img src="https://via.placeholder.com/24/007bff/ffffff?text=FB" alt="Facebook"></a>
<a href="#" aria-label="Twitter"><img src="https://via.placeholder.com/24/1da1f2/ffffff?text=TW" alt="Twitter"></a>
<a href="#" aria-label="LinkedIn"><img src="https://via.placeholder.com/24/0077b5/ffffff?text=LI" alt="LinkedIn"></a>
</div>
</div>
</footer>
</body>
</html>Yiru@Studio - 關於我 - 意如