用html5 和css写一个个人介绍的网页
时间: 2024-06-09 10:05:06 浏览: 24
好的,以下是一个基础的个人介绍网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人介绍</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
margin: 0 0 20px;
line-height: 1.5;
}
</style>
</head>
<body>
<header>
<h1>个人介绍</h1>
</header>
<main>
<img src="your-image.jpg" alt="你的照片">
<h2>基本信息</h2>
<p>姓名:Your Name</p>
<p>性别:Male/Female</p>
<p>年龄:18</p>
<p>电话:+86 1234567890</p>
<p>邮箱:your-email@example.com</p>
<h2>个人简介</h2>
<p>你可以在这里写一段简短的自我介绍,介绍你的兴趣爱好、特长、职业等等。</p>
<h2>教育经历</h2>
<p>你可以在这里列出你的教育经历,包括学校名称、所学专业、学位等等。</p>
<h2>工作经历</h2>
<p>你可以在这里列出你的工作经历,包括公司名称、职位、工作内容等等。</p>
</main>
</body>
</html>
```
你可以将上面的代码复制到一个文本编辑器中,将 `your-image.jpg` 替换为你的照片的文件名,然后将整个文件保存为 `.html` 文件,用浏览器打开即可看到效果。你可以根据自己的需要修改和添加内容,美化样式。
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)