目錄
- 預覽效果
- 分析要點
- 響應式網格布局
- 卡片樣式：陰影和過渡效果
- 代碼
- 優化希望 長短不一的郵箱地址在左右居中的同時,做到左側文字對齊(wikijs可用)
- 總結
歡迎關注 『前端布局樣式』 專欄，持續更新中
歡迎關注 『前端布局樣式』 專欄，持續更新中
預覽效果
分析要點
響應式網格布局
.cardList {margin: 40px auto;padding: 0 15px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;
}
使用了 grid 布局，通過 grid-template-columns 定義了響應式列布局。
auto-fill 和 minmax(300px, 1fr) 實現了在不同屏幕尺寸下的自適應布局。卡片的最小寬度為 300px，而最大寬度根據可用空間動態調整。
gap: 20px 使得每個卡片之間有一定的間距，提升視覺效果。
卡片樣式：陰影和過渡效果
.card {background-color: #fff;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, .1);padding: 20px;text-align: center;transition: transform .3s, box-shadow .3s;
}
.card:hover {transform: translateY(-10px);box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}
.card 類的樣式設計簡潔，采用了白色背景和圓角（border-radius: 8px）來提升現代感。
box-shadow 添加了陰影效果，使得卡片看起來有浮動感。
transition 屬性定義了卡片的過渡效果，使得卡片在鼠標懸停時出現平滑的動畫效果（例如，向上移動和陰影加深）。
代碼
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聯系方式</title><style>.cardList {margin: 40px auto;padding: 0 15px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px}.card {background-color: #fff;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, .1);padding: 20px;text-align: center;transition: transform .3s, box-shadow .3s}.card:hover {transform: translateY(-10px);box-shadow: 0 6px 16px rgba(0, 0, 0, .1)}.card h2 {color: #2980b9;font-size: 20px;margin-bottom: 15px}.card p {font-size: 16px;color: #555;margin-bottom: 15px}.email-list {list-style: none;padding: 0;margin: 0}.email-list li {margin: 8px 0}.email-list li a {color: #2980b9;text-decoration: none;font-weight: 700}.email-list li a:hover {text-decoration: underline}.tip {text-align: left;text-indent: 2em;}</style>
</head><body><div class="cardList"><!-- Plus4 Card --><div class="card"><h2>機器型號 1</h2><p class="tip">如果您需要有關 機器型號 1 型號的售后服務，請通過以下郵箱聯系我們：</p><ul class="email-list"><li><a href="mailto:example1@domain.com">example1@domain.com</a></li><li><a href="mailto:example2@domain.com">example2@domain.com</a></li></ul></div><!-- Q1 Pro Card --><div class="card"><h2>機器型號 2</h2><p class="tip">如果您需要有關 機器型號 2 型號的支持，請通過以下聯系方式聯系我們：</p><ul class="email-list"><li><a href="mailto:example3@domain.com">example3@domain.com</a></li><li><a href="mailto:example4@domain.com">example4@domain.com</a></li></ul></div><!-- X-Max 3 Card --><div class="card"><h2>機器型號 3</h2><p class="tip">對于 機器型號 3 型號的售后服務，請通過以下郵箱聯系我們：</p><ul class="email-list"><li><a href="mailto:example5@domain.com">example5@domain.com</a></li><li><a href="mailto:example6@domain.com">example6@domain.com</a></li></ul></div><!-- X-Plus 3 Card --><div class="card"><h2>機器型號 4</h2><p class="tip">如果您需要有關 機器型號 4 型號的售后服務，請通過以下郵箱聯系我們：</p><ul class="email-list"><li><a href="mailto:example7@domain.com">example7@domain.com</a></li><li><a href="mailto:example8@domain.com">example8@domain.com</a></li></ul></div><!-- X-Smart 3 Card --><div class="card"><h2>機器型號 5</h2><p class="tip">如果您需要有關 機器型號 5 型號的售后服務，請通過以下郵箱聯系我們：</p><ul class="email-list"><li><a href="mailto:example9@domain.com">example9@domain.com</a></li><li><a href="mailto:example10@domain.com">example10@domain.com</a></li></ul></div></div></body></html>優化希望 長短不一的郵箱地址在左右居中的同時,做到左側文字對齊(wikijs可用)
wikijs本身有自帶的樣式,干擾了我們的ul/li/h2樣式,所以用了幾個!important 強制樣式,如果有更好的解決辦法,請評論區留言,一般情況你不需要設置這些!important 會影響性能
width: fit-content;：使
- 的寬度根據其內容自動適應。
margin-left: auto; 和 margin-right: auto;：將- 居中顯示在其父容器中。
這三個屬性結合使用，能確保- 元素不會占用多余的空間并且居中顯示，同時每個
- 元素的內容從左對齊。
- 居中顯示在其父容器中。
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聯系方式</title><style>.cardList {margin: 40px auto;padding: 0 15px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px}.card {background-color: #fff;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, .1);padding: 20px;text-align: center;transition: transform .3s, box-shadow .3s}.card:hover {transform: translateY(-10px);box-shadow: 0 6px 16px rgba(0, 0, 0, .1)}.cardTitle {color: #2980b9;font-size: 20px;margin-bottom: 15px;position: relative}.cardTitle::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #000}.card p {font-size: 16px;color: #555;margin-bottom: 15px}.email-list {list-style: none;padding: 0 !important;margin: 0;width: fit-content !important;margin-left: auto;margin-right: auto}.email-list li {margin: 8px 0;color: #2980b9;text-decoration: none;font-weight: 700;text-align: left}.email-list li::before {content: none !important}.email-list li a:hover {text-decoration: underline}.tip {text-align: left;text-indent: 2em}.important {color: #e74c3c;font-weight: 700}</style>
</head><body><div class="cardList"><!-- Plus4 Card --><div class="card"><div class="cardTitle">支持聯系方式</div><p class="tip">如果您需要相關支持，請通過以下郵箱聯系我們：</p><ul class="email-list"><li>support111111111@example.com</li><li>support2222@example.com</li></ul></div><!-- Q1 Pro Card --><div class="card"><div class="cardTitle">支持聯系方式</div><p class="tip">如果您需要相關支持，請通過以下郵箱聯系我們：</p><ul class="email-list"><li>support3333@example.com</li><li>support4444444444@example.com</li></ul></div><!-- X-Max 3 Card --><div class="card"><div class="cardTitle">支持聯系方式</div><p class="tip">如果您需要相關支持，請通過以下郵箱聯系我們：</p><ul class="email-list"><li>support55555555@example.com</li><li>support666@example.com</li></ul></div><!-- X-Plus 3 Card --><div class="card"><div class="cardTitle">支持聯系方式</div><p class="tip">如果您需要相關支持，請通過以下郵箱聯系我們：</p><ul class="email-list"><li>support7@example.com</li><li>support8@example.com</li></ul></div><!-- X-Smart 3 Card --><div class="card"><div class="cardTitle">支持聯系方式</div><p class="tip">如果您需要相關支持，請通過以下郵箱聯系我們：</p><ul class="email-list"><li>support9@example.com</li><li>support10@example.com</li></ul></div></div></body></html>總結
大家喜歡的話，給個👍，點個關注！給大家分享更多計算機專業學生的求學之路！
版權聲明：
發現你走遠了@mzh原創作品，轉載必須標注原文鏈接
Copyright 2024 mzh
Crated：2024-12-1
歡迎關注 『前端布局樣式』 專欄，持續更新中
歡迎關注 『前端布局樣式』 專欄，持續更新中
『未完待續』
——Triton源碼接結構)
