HTML、CSS和JavaScript编写的个人首页代码
时间: 2023-02-16 18:31:25 浏览: 72
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的个人首页</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>关于我</h2>
<p>我是一名程序员,熟练掌握HTML、CSS和JavaScript等web开发技能。</p>
</section>
<section id="portfolio">
<h2>作品集</h2>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<p>电话: xxx-xxx-xxxx</p>
<p>邮箱: xxxxx@xxx.com</p>
</section>
</body>
</html>
```
CSS代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f2f2f2;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
section {
margin: 20px;
}
section h2 {
margin-top: 0;
}
```
JavaScript代码:
```javascript
// 一个演示性质的JS代码,点击按钮改变其背景颜色
var button = document.querySelector("button");
button.addEventListener("click", function() {
document.body.classList.toggle("color-change");
});
```
请注意,上面的代码只是一个简单的示例,实际项目中需要根据需求进行修改和增加功