为了结合后端而学习前端的学习日志（1）——纯CSS静态卡片案例 ...

温锦文欧普厨电及净水器总代理  论坛元老 | 2025-5-8 07:03:26 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1891|帖子 1891|积分 5673



前端设计专栏
  
使用纯CSS创建简洁名片卡片的学习实践

在这篇技术博客中，我将分享我的前端学习过程，怎样使用纯HTML和CSS创建一个简洁美观的名片式卡片，就像我博客首页展示的那样。这种卡片计划非常适合作为个人简介、产物展示或团队成员先容。

源码展示

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>纯CSS名片卡片</title>
  7.     <style>
  8.         /* 全局重置与基础设置 */
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         
  15.         body {
  16.             background-color: #daf1e2;
  17.             display: flex;
  18.             justify-content: center;
  19.             align-items: center;
  20.             min-height: 100vh;
  21.             font-family: 'Microsoft YaHei', sans-serif;
  22.         }
  23.         
  24.         /* 卡片容器样式 */
  25.         .card {
  26.             margin: 30px auto;
  27.             width: 250px;
  28.             height: 250px;
  29.             background-color: #000;
  30.             text-align: center;
  31.             border-radius: 25px;
  32.             padding-top: 35px;
  33.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  34.             transition: all 0.3s ease;
  35.         }
  36.         
  37.         /* 头像图片样式 */
  38.         .logo {
  39.             margin-bottom: 20px;
  40.             width: 90px;
  41.             height: 90px;
  42.             border-radius: 50%;
  43.             object-fit: cover;
  44.             border: 3px solid #daf1e2;
  45.         }
  46.         
  47.         /* 文字样式 */
  48.         .writer {
  49.             font: normal 700 20px 'Microsoft YaHei', sans-serif;
  50.             color: #fff;
  51.             text-align: center;
  52.             margin-bottom: 10px;
  53.         }
  54.         
  55.         .introduce {
  56.             font: normal 700 12px 'Microsoft YaHei', sans-serif;
  57.             color: #fff;
  58.             text-align: center;
  59.         }
  60.         
  61.         /* 悬停效果 */
  62.         .card:hover {
  63.             transform: translateY(-5px);
  64.             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  65.         }
  66.         
  67.         /* 响应式设计 */
  68.         @media (max-width: 600px) {
  69.             .card {
  70.                 width: 200px;
  71.                 height: 200px;
  72.                 padding-top: 25px;
  73.             }
  74.             
  75.             .logo {
  76.                 width: 70px;
  77.                 height: 70px;
  78.                 margin-bottom: 15px;
  79.             }
  80.             
  81.             .writer {
  82.                 font-size: 18px;
  83.             }
  84.             
  85.             .introduce {
  86.                 font-size: 10px;
  87.             }
  88.         }
  89.     </style>
  90. </head>
  91. <body>
  92.     <div class="card">
  93.         <!-- 替换为你的图片路径 -->
  94.         <img src="https://via.placeholder.com/150" alt="头像" class="logo">
  95.         <p class="writer">OverThinker</p>
  96.         <p class="introduce">欢迎来到我的博客</p>
  97.     </div>
  98. </body>
  99. </html>
复制代码
记得替换为本身的图片路径！！！
HTML结构分析

首先，让我们看看底子的HTML结构：
  1. <div class="card">
  2.     <img src="../image/了不起的盖茨比.jpg" alt="" class="logo">
  3.     <p class="writer">OverThinker</p>
  4.     <p class="introduce">欢迎来到我的博客</p>
  5. </div>
复制代码
这个结构非常简朴明了：

  • 一个div容器作为卡片主体
  • 一个圆形头像图片
  • 两个段落文本分别显示名称和简短先容
CSS样式详解

1. 全局重置与底子设置

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. body {
  7.     background-color: #daf1e2;
  8. }
复制代码


  • *选择器重置了所有元素的外边距和内边距，确保在差异浏览器中表现划一
  • box-sizing: border-box让元素的宽度和高度包含边框和内边距，更符合直觉
  • 设置了柔和的浅绿色背景(#daf1e2)作为整个页面的底色
2. 卡片容器样式

  1. div.card {
  2.     margin: 30px auto;
  3.     width: 250px;
  4.     height: 250px;
  5.     background-color: #000;
  6.     text-align: center;
  7.     border-radius: 25px;
  8.     padding-top: 35px;
  9. }
复制代码


  • margin: 30px auto：上下边距30px，左右自动居中
  • 固定宽高250px的正方形
  • 黑色背景(#000)
  • 内容居中对齐
  • border-radius: 25px创建圆角结果
  • padding-top: 35px顶部内边距，使内容下移
3. 头像图片样式

  1. img.logo {
  2.     margin-bottom: 20px;
  3.     width: 90px;
  4.     height: 90px;
  5.     border-radius: 50%;
  6. }
复制代码


  • 固定宽高90px的正方形
  • border-radius: 50%将其变为圆形
  • 底部外边距20px，与下方文字保持隔断
4. 文字样式

  1. p.writer {
  2.     font: normal 700 20px 微软雅黑;
  3.     color: #fff;
  4.     text-align: center;
  5.     margin-bottom: 10px;
  6. }
  8. p.introduce {
  9.     font: normal 700 12px 微软雅黑;
  10.     color: #fff;
  11.     text-align: center;
  12. }
复制代码


  • 使用了font简写属性设置字体样式
  • 白色文字(#fff)在黑色背景上形成高对比度
  • 名称使用20px较大字号，简介使用12px较小字号
  • 都设置为居中对齐
计划要点总结


  • 视觉层次：通过字体巨细差异创建清晰的视觉层次
  • 对比度：黑白高对比度确保可读性
  • 圆角计划：卡片和头像都使用圆角，营造友爱现代感
  • 间距控制：精心调整的内外边距使结构平衡
  • 居中结构：所有内容居中对齐，形成视觉核心
响应式考虑

当前计划是固定尺寸的，要使其响应式，可以：
  1. @media (max-width: 600px) {
  2.     div.card {
  3.         width: 200px;
  4.         height: 200px;
  5.     }
  6.     img.logo {
  7.         width: 70px;
  8.         height: 70px;
  9.     }
  10. }
复制代码
扩展建议


  • 添加悬停结果加强交互性：
  1. div.card:hover {
  2.     transform: translateY(-5px);
  3.     box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  4.     transition: all 0.3s ease;
  5. }
复制代码

  • 使用CSS变量方便主题切换：
  1. :root {
  2.     --card-bg: #000;
  3.     --text-color: #fff;
  4. }
复制代码
这种简洁的卡片计划虽然简朴，但包含了CSS结构的核心概念，非常适合初学者训练，也可以作为更复杂组件的底子。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

温锦文欧普厨电及净水器总代理

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表