js个人主页源代码
当然，以下是一个简单的JavaScript个人主页的源代码示例。这个示例包含了一个基本的HTML结构，使用了一些CSS进行样式设置，并通过JavaScript添加了一些交互功能。
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的个人主页</h1>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#projects">项目</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>关于我</h2>
<p>我是一名软件开发工程师，专注于前端和后端开发。</p>
</section>
<section id="projects">
<h2>项目</h2>
<ul id="project-list">
<!-- 项目列表将通过JavaScript动态生成 -->
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<form id="contact-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="message">消息:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">发送</button>
</form>
</section>
<script src="script.js"></script>
</body>
</html>CSS (styles.css)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 1em;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
padding: 20px;
}
form {
display: flex;
flex-direction: column;
}
form label {
margin-top: 10px;
}
form button {
margin-top: 20px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}JavaScript (script.js)
document.addEventListener('DOMContentLoaded', function() {
const projects = [
{ name: '项目1', description: '这是一个示例项目' },
{ name: '项目2', description: '这是另一个示例项目' }
];
const projectList = document.getElementById('project-list');
projects.forEach(project => {
const listItem = document.createElement('li');
listItem.textContent = `${project.name}: ${project.description}`;
projectList.appendChild(listItem);
});
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', function(event) {
event.preventDefault();
alert('消息已发送！');
contactForm.reset();
});
});解释
- HTML: 定义了页面的基本结构，包括头部、导航栏、关于我、项目和联系我等部分。
- CSS: 提供了基本的样式，使页面看起来更美观。
- JavaScript:
- 在页面加载完成后，动态生成项目列表。
- 添加了一个简单的表单提交处理程序，当用户提交表单时，显示一个提示并重置表单。
这个示例展示了如何使用HTML、CSS和JavaScript创建一个简单的个人主页，并添加一些基本的交互功能。你可以根据需要进一步扩展和自定义这个示例。
相关·内容
高校公开课
Techo Youth3月高校公开课：教练我想学编程：程序员的打怪升级之路
ServerlessDays · China Online
TVP「再定义领导力」技术管理会议
TVP「再定义领导力」技术管理会议 —— 转型中的变革与守望专题
云+未来峰会
北京站开发者专场
云+社区技术沙龙[第18期]
走进腾讯，聊运维干货 腾讯云DevOps技术实践沙龙
小程序·云开发官方直播课（数据库方向）
小程序云原生的新探索：云开发数据库
云+社区技术沙龙 [第30期]
腾讯开源技术
云+社区技术沙龙[第8期]
WeGeek微信小程序敏捷开发实战（上海站）
云+社区技术沙龙[第5期]
WeGeek微信小程序敏捷开发实战（北京站）
云+社区开发者大会（北京站）
5G探索：核心技术与挑战
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
