在线代码编辑器-开发工具-核心编程

首页
零基础教程
分类浏览
编程
- Sentinel
- Go语言
- C语言
- 汇编语言
- Android
- Java工具库
- Spring Cloud Alibaba
- Spring Cloud
- Spring Data
- Spring Boot
- Spring Batch
- JSP/Servlet
- Hadoop
- Dubbo
- J2Cache
- Hibernate
- OpenJPA
- MyBatis
- ShardingSphere
- Freemarker
- Thymeleaf
- Activiti
- POI
- JMail
- Log4j
- LogBack
- Dom4j
- XML
- RxJava
- JasperReport
- JUnit
- JMock
- Apache Commons
- HttpComponents
- CGLib
- WebSocket
- ESAPI
- 设计模式
前端
- CSS/CSS3
- HTML5
- JavaScript
- JQuery
- DHTMLX
- 浏览器
- HTML
- 前端小知识
- Vue.js
- NodeJS
- ECharts
- Less
- UmiJS
- React
- Ant Design
- Bootstrap
- uni-app
- JS-XLSX
数据库
- SQL
- PL/SQL
- MySQL
- Oracle
- Redis
- SQLite
- MongoDB
- Zookeeper
- H2
服务器
- Podman
- Prometheus
- Tomcat
- JBoss
- RocketMQ
- Docker
- Nginx
- RabbitMQ
其他
- 程序员
- Maven
- SVN
- Git
- UML
- Windows
- 办公软件
- Axure
- Jenkins
- HTTP
- macOS
Java
Spring
Linux
AI
代码片段
Get小技能
面试题
开发工具

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人信息卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

body {
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* 占满整个视口高度 */
        }

/* 个人信息卡核心样式 */
        .personal-card {
            width: 350px; /* 卡片宽度 */
            background-color: #ffffff;
            border-radius: 16px; /* 圆角效果 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影提升立体感 */
            overflow: hidden; /* 隐藏超出圆角的内容 */
            transition: box-shadow 0.3s ease; /*  hover 过渡动画 */
        }

/* 卡片 hover 效果，增强交互感 */
        .personal-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

/* 卡片头部（头像+背景图） */
        .card-header {
            width: 100%;
            height: 120px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
            position: relative; /* 用于定位头像 */
        }

/* 头像样式 */
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%; /* 圆形头像 */
            border: 4px solid #ffffff; /* 白色边框衬托 */
            position: absolute;
            bottom: -40px; /* 向上偏移一半，露出在头部和内容区之间 */
            left: 20px;
            object-fit: cover; /* 保证图片不变形 */
        }

/* 卡片内容区域 */
        .card-content {
            padding: 50px 20px 20px; /* 顶部预留头像空间 */
        }

/* 姓名样式 */
        .name {
            font-size: 22px;
            font-weight: bold;
            color: #2d3748;
            margin-bottom: 8px;
        }

/* 职业/标签样式 */
        .job {
            font-size: 14px;
            color: #667eea;
            margin-bottom: 20px;
            padding: 4px 12px;
            background-color: #f0f4ff;
            display: inline-block;
            border-radius: 16px;
        }

/* 信息列表样式 */
        .info-list {
            list-style: none;
        }

/* 单个信息项样式 */
        .info-item {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #4a5568;
            margin-bottom: 12px;
        }

/* 信息项图标（用文本替代，无需外部资源） */
        .info-icon {
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #667eea;
            margin-right: 12px;
            font-weight: bold;
        }

/* 卡片底部样式 */
        .card-footer {
            padding: 16px 20px;
            border-top: 1px solid #f7fafc;
            display: flex;
            justify-content: flex-end;
        }

/* 签名样式 */
        .signature {
            font-size: 12px;
            color: #a0aec0;
            font-style: italic;
        }
    </style>
</head>
<body>

<div class="personal-card">
        
        <div class="card-header">
            <img src="https://picsum.photos/200/200" alt="个人头像" class="avatar">
        </div>
        
        <div class="card-content">
            <h2 class="name">张三</h2>
            <span class="job">前端开发工程师</span>
            <ul class="info-list">
                <li class="info-item">
                    <span class="info-icon">📱</span>
                    <span>138-0000-1234</span>
                </li>
                <li class="info-item">
                    <span class="info-icon">📧</span>
                    <span>zhangsan@example.com</span>
                </li>
                <li class="info-item">
                    <span class="info-icon">📍</span>
                    <span>北京市 朝阳区</span>
                </li>
                <li class="info-item">
                    <span class="info-icon">💻</span>
                    <span>www.zhangsan.com</span>
                </li>
            </ul>
        </div>
        
        <div class="card-footer">
            <p class="signature">不忘初心，方得始终</p>
        </div>
    </div>

</body>
</html>

在线代码编辑器

代码编辑区自动执行

预览效果

字符数: 0

提示: 输入完整的HTML代码，包括<!DOCTYPE>和<html>标签

关于

本网站专注于 Java、数据库（MySQL、Oracle）、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章，助力技术传播与交流。无论是技术新手渴望入门，还是资深开发者寻求进阶，这里都能为您提供深度见解与实用经验，让复杂编码变得轻松易懂，携手共赴技术提升新高度。如有侵权，请来信告知：hxstrive@outlook.com

链接

其他应用

开源镜像网站

公众号

在线代码编辑器

代码编辑区 自动执行

预览效果

选择模板

选择库和版本

库

版本

文件

代码编辑区自动执行