用html和css做个人介绍
时间: 2023-08-21 11:01:50 浏览: 59
好的,以下是一个简单的HTML和CSS代码,可以用来制作个人介绍页面:
```HTML
<!DOCTYPE html>
<html>
<head>
<title>个人介绍</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.card {
background-color: #f2f2f2;
border: 1px solid #ddd;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
margin: 20px;
padding: 20px;
max-width: 300px;
text-align: center;
}
.card img {
max-width: 100%;
margin-bottom: 20px;
}
.card h2 {
font-size: 24px;
margin-top: 0;
}
.card p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<header>
<h1>个人介绍</h1>
</header>
<section>
<div class="card">
<img src="https://via.placeholder.com/200x200" alt="头像">
<h2>姓名</h2>
<p>介绍自己的一些信息,比如职业、爱好等。</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/200x200" alt="头像">
<h2>姓名</h2>
<p>介绍自己的一些信息,比如职业、爱好等。</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/200x200" alt="头像">
<h2>姓名</h2>
<p>介绍自己的一些信息,比如职业、爱好等。</p>
</div>
</section>
</body>
</html>
```
你可以将上面的代码复制到一个新建的HTML文件中,然后用文本编辑器打开并保存为.html格式文件。接下来就可以在浏览器中打开这个文件,查看效果了。