用layui编写一个履历卡html
时间: 2024-05-25 18:05:01 浏览: 101
以下是一个简单的 layui 履历卡 HTML 示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>履历卡</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row layui-col-space15">
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">个人信息</div>
<div class="layui-card-body">
<img src="https://cdn.staticfile.org/layui/2.5.7/images/face/3.jpg" class="layui-circle" style="width: 100px;height: 100px;margin-bottom: 10px;">
<p>姓名:张三</p>
<p>性别:男</p>
<p>出生日期:1990年1月1日</p>
<p>联系电话:13888888888</p>
<p>电子邮箱:zhangsan@qq.com</p>
</div>
</div>
</div>
<div class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-header">工作经历</div>
<div class="layui-card-body">
<div class="layui-timeline">
<div class="layui-timeline-item">
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">2010年1月-2013年12月</h3>
<p>
<strong>公司名称:</strong>XXX有限公司<br>
<strong>职位名称:</strong>软件工程师<br>
<strong>工作内容:</strong>负责公司产品的开发和维护。
</p>
</div>
</div>
<div class="layui-timeline-item">
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">2008年9月-2009年12月</h3>
<p>
<strong>公司名称:</strong>YYY有限公司<br>
<strong>职位名称:</strong>软件实习生<br>
<strong>工作内容:</strong>参与公司产品的开发和测试。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">教育经历</div>
<div class="layui-card-body">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">2006年9月-2010年6月</h2>
<div class="layui-colla-content layui-show">
<p>
<strong>学校名称:</strong>ABC大学<br>
<strong>专业名称:</strong>计算机科学与技术<br>
<strong>学位名称:</strong>学士<br>
<strong>主修课程:</strong>数据结构、算法设计与分析、操作系统等。
</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">2013年9月-2015年6月</h2>
<div class="layui-colla-content">
<p>
<strong>学校名称:</strong>DEF大学<br>
<strong>专业名称:</strong>软件工程<br>
<strong>学位名称:</strong>硕士<br>
<strong>主修课程:</strong>软件需求工程、软件架构设计、软件测试等。
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
</body>
</html>
```
其中,使用了 layui 的卡片(`layui-card`)、时间轴(`layui-timeline`)和折叠面板(`layui-collapse`)等组件来实现履历卡的样式。具体使用方法可以参考 layui 的官方文档。
阅读全文