前端設計專欄
使用純CSS創建簡潔名片卡片的學習實踐
在這篇技術博客中，我將分享我的前端學習過程，如何使用純HTML和CSS創建一個簡潔美觀的名片式卡片，就像我博客首頁展示的那樣。這種卡片設計非常適合作為個人簡介、產品展示或團隊成員介紹。
源碼展示
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>純CSS名片卡片</title><style>/* 全局重置與基礎設置 */* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #daf1e2;display: flex;justify-content: center;align-items: center;min-height: 100vh;font-family: 'Microsoft YaHei', sans-serif;}/* 卡片容器樣式 */.card {margin: 30px auto;width: 250px;height: 250px;background-color: #000;text-align: center;border-radius: 25px;padding-top: 35px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transition: all 0.3s ease;}/* 頭像圖片樣式 */.logo {margin-bottom: 20px;width: 90px;height: 90px;border-radius: 50%;object-fit: cover;border: 3px solid #daf1e2;}/* 文字樣式 */.writer {font: normal 700 20px 'Microsoft YaHei', sans-serif;color: #fff;text-align: center;margin-bottom: 10px;}.introduce {font: normal 700 12px 'Microsoft YaHei', sans-serif;color: #fff;text-align: center;}/* 懸停效果 */.card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);}/* 響應式設計 */@media (max-width: 600px) {.card {width: 200px;height: 200px;padding-top: 25px;}.logo {width: 70px;height: 70px;margin-bottom: 15px;}.writer {font-size: 18px;}.introduce {font-size: 10px;}}</style>
</head>
<body><div class="card"><!-- 替換為你的圖片路徑 --><img src="https://via.placeholder.com/150" alt="頭像" class="logo"><p class="writer">OverThinker</p><p class="introduce">歡迎來到我的博客</p></div>
</body>
</html>
記得替換為自己的圖片路徑！！！
HTML結構分析
首先，讓我們看看基礎的HTML結構：
<div class="card"><img src="../image/了不起的蓋茨比.jpg" alt="" class="logo"><p class="writer">OverThinker</p><p class="introduce">歡迎來到我的博客</p>
</div>
這個結構非常簡單明了：
- 一個
div容器作為卡片主體 - 一個圓形頭像圖片
- 兩個段落文本分別顯示名稱和簡短介紹
CSS樣式詳解
1. 全局重置與基礎設置
* {margin: 0;padding: 0;box-sizing: border-box;
}
body {background-color: #daf1e2;
}
*選擇器重置了所有元素的外邊距和內邊距，確保在不同瀏覽器中表現一致box-sizing: border-box讓元素的寬度和高度包含邊框和內邊距，更符合直覺- 設置了柔和的淺綠色背景(
#daf1e2)作為整個頁面的底色
2. 卡片容器樣式
div.card {margin: 30px auto;width: 250px;height: 250px;background-color: #000;text-align: center;border-radius: 25px;padding-top: 35px;
}
margin: 30px auto：上下邊距30px，左右自動居中- 固定寬高250px的正方形
- 黑色背景(
#000) - 內容居中對齊
border-radius: 25px創建圓角效果padding-top: 35px頂部內邊距，使內容下移
3. 頭像圖片樣式
img.logo {margin-bottom: 20px;width: 90px;height: 90px;border-radius: 50%;
}
- 固定寬高90px的正方形
border-radius: 50%將其變為圓形- 底部外邊距20px，與下方文字保持距離
4. 文字樣式
p.writer {font: normal 700 20px 微軟雅黑;color: #fff;text-align: center;margin-bottom: 10px;
}p.introduce {font: normal 700 12px 微軟雅黑;color: #fff;text-align: center;
}
- 使用了
font簡寫屬性設置字體樣式 - 白色文字(
#fff)在黑色背景上形成高對比度 - 名稱使用20px較大字號，簡介使用12px較小字號
- 都設置為居中對齊
設計要點總結
- 視覺層次：通過字體大小差異創建清晰的視覺層次
- 對比度：黑白高對比度確保可讀性
- 圓角設計：卡片和頭像都使用圓角，營造友好現代感
- 間距控制：精心調整的內外邊距使布局平衡
- 居中布局：所有內容居中對齊，形成視覺焦點
響應式考慮
當前設計是固定尺寸的，要使其響應式，可以：
@media (max-width: 600px) {div.card {width: 200px;height: 200px;}img.logo {width: 70px;height: 70px;}
}
擴展建議
- 添加懸停效果增強交互性：
div.card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.2);transition: all 0.3s ease;
}
- 使用CSS變量方便主題切換：
:root {--card-bg: #000;--text-color: #fff;
}
這種簡潔的卡片設計雖然簡單，但包含了CSS布局的核心概念，非常適合初學者練習，也可以作為更復雜組件的基礎。
、rsort()、asort()、arsort()、ksort()、krsort() 的適用場景與性能對比)
