利用html做一个美观大方的个人基本信息的页面
时间: 2023-12-14 10:02:22 浏览: 20
好的,以下是一个简单的个人基本信息的页面的HTML代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>个人基本信息</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
text-align: center;
color: #333;
margin-top: 50px;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px #999;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}
th {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>个人基本信息</h1>
<div class="container">
<table>
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
</tr>
<tr>
<th>年龄</th>
<td>25</td>
</tr>
<tr>
<th>手机号码</th>
<td>13812345678</td>
</tr>
<tr>
<th>邮箱地址</th>
<td>zhangsan@example.com</td>
</tr>
<tr>
<th>教育背景</th>
<td>本科</td>
</tr>
<tr>
<th>工作经历</th>
<td>3年</td>
</tr>
<tr>
<th>个人简介</th>
<td>我是一名程序员,热爱编程,喜欢学习新技术。</td>
</tr>
</table>
</div>
</body>
</html>
```
你可以将以上代码保存为一个名为 `index.html` 的文件,并使用浏览器打开。这个页面包含一个标题、一个容器和一个表格。容器用于将表格包装起来,并添加一些样式,使其看起来更美观。表格包含了一些基本信息,如姓名、性别、年龄、联系方式、教育背景、工作经历和个人简介。你可以根据自己的需要修改这些信息,或者添加更多的信息。