用html+js写一个个人主页
时间: 2023-12-05 22:05:21 浏览: 34
好的,下面是一个简单的个人主页示例,包含了个人信息、技能、项目和联系方式:
```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;
}
section {
display: flex;
flex-wrap: wrap;
margin: 20px;
}
section > div {
width: 50%;
padding: 10px;
}
h2 {
margin-top: 0;
font-size: 24px;
}
ul {
margin: 0;
padding-left: 20px;
}
li {
margin-bottom: 10px;
}
a {
color: #333;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>个人主页</h1>
<p>欢迎来到我的个人主页!</p>
</header>
<section>
<div>
<h2>个人信息</h2>
<ul>
<li>姓名:张三</li>
<li>年龄:25</li>
<li>性别:男</li>
<li>学历:本科</li>
</ul>
</div>
<div>
<h2>技能</h2>
<ul>
<li>Java</li>
<li>JavaScript</li>
<li>HTML/CSS</li>
<li>MySQL</li>
</ul>
</div>
<div>
<h2>项目</h2>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
</ul>
</div>
<div>
<h2>联系方式</h2>
<ul>
<li>电话:1234567890</li>
<li>邮箱:<a href="mailto:example@example.com">example@example.com</a></li>
<li>微信:example</li>
</ul>
</div>
</section>
<footer>
<p>版权所有 © 2021 张三</p>
</footer>
</body>
</html>
```
该页面使用了 HTML 和 CSS,以及一些简单的 JavaScript。其中:
- `<header>` 标签用于显示页面的标题和一些简介。
- `<section>` 标签用于划分页面的几个部分,每个部分使用一个 `<div>` 标签实现。
- `<ul>` 和 `<li>` 标签用于显示列表,其中技能和项目部分的列表项使用了链接。
- `<footer>` 标签用于显示版权信息。
你可以将该代码保存为一个 HTML 文件,然后在浏览器中打开查看效果。