使用bootstrap中的各种css样式类,完成个人简历页面制作代码
时间: 2023-12-06 15:45:08 浏览: 121
响应式Bootstrap个人简历模板源代码
5星 · 资源好评率100%
以下是一个简单的个人简历页面的HTML和Bootstrap样式代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
color: #343a40;
font-size: 1.2rem;
line-height: 1.5;
}
.container {
padding-top: 2rem;
}
h1, h2 {
text-align: center;
margin-bottom: 2rem;
}
.lead {
font-size: 1.5rem;
}
.list-group-item {
background-color: #f8f9fa;
border: none;
}
.list-group-item:hover {
background-color: #e2e6ea;
}
.education, .experience {
padding-top: 2rem;
}
</style>
</head>
<body>
<div class="container">
<h1>个人简历</h1>
<div class="row">
<div class="col-md-4">
<img src="avatar.jpg" alt="头像" class="img-fluid rounded-circle">
<h2 class="mt-3">姓名</h2>
<p class="lead">个人简介</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">电话:xxx-xxxx-xxxx</li>
<li class="list-group-item">邮箱:xxxxx@xxx.com</li>
<li class="list-group-item">地址:xxxxx</li>
</ul>
</div>
<div class="col-md-8">
<div class="education">
<h2>教育背景</h2>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h4>学校名称</h4>
<p>学位:专业名称</p>
<p>时间:XXXX年 - XXXX年</p>
</li>
<li class="list-group-item">
<h4>学校名称</h4>
<p>学位:专业名称</p>
<p>时间:XXXX年 - XXXX年</p>
</li>
</ul>
</div>
<div class="experience">
<h2>工作经历</h2>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h4>公司名称</h4>
<p>职位:职位名称</p>
<p>时间:XXXX年 - XXXX年</p>
<ul>
<li>工作内容1</li>
<li>工作内容2</li>
<li>工作内容3</li>
</ul>
</li>
<li class="list-group-item">
<h4>公司名称</h4>
<p>职位:职位名称</p>
<p>时间:XXXX年 - XXXX年</p>
<ul>
<li>工作内容1</li>
<li>工作内容2</li>
<li>工作内容3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
```
你可以将上述代码保存为一个HTML文件,并将其中的头像图片替换为你自己的头像,然后用浏览器打开这个HTML文件,就可以看到一个简单的个人简历页面了。
阅读全文