网站开发代码,国内高速云服务器vps,服务器 vps,vps 服务器推荐,vps修改密码

🗣 Wd提问: 网站开发代码

🤖 Ai回答:
当然可以！以下是一个完整的静态网站开发代码示例，使用 HTML、CSS 和 JavaScript 构建一个简洁美观的个人主页。你可以直接复制粘贴到 `.html` 文件中运行。

✅ 1、`index.html`（网页结构）

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8 /
<meta name=viewport content=width=device-width, initial-scale=1.0/
<title我的个人网站</title
<link rel=stylesheet href=style.css /
</head
<body
<! 导航栏
<header class=navbar
<div class=container
<h1小明的网站</h1
<nav
<ul
<li<a href=home首页</a</li
<li<a href=about关于我</a</li
<li<a href=projects项目</a</li
<li<a href=contact联系我</a</li
</ul
</nav
</div
</header

<! 主要内容区
<section id=home class=hero
<div class=container
<h2欢迎来到我的世界</h2
<p我是小明，一名热爱前端开发的程序员。</p
<button onclick=alert('Hello!')点击了解我</button
</div
</section

<section id=about class=section
<div class=container
<h2关于我</h2
<p我专注于网页设计与开发，擅长 HTML、CSS、JavaScript。喜欢用代码创造美。</p
<div class=skills
<spanHTML5</span
<spanCSS3</span
<spanJavaScript</span
<spanResponsive Design</span
</div
</div
</section

<section id=projects class=section
<div class=container
<h2我的项目</h2
<div class=project-grid
<div class=project-card
<h3个人博客</h3
<p使用纯 HTML/CSS/JS 构建的静态博客系统。</p
</div
<div class=project-card
<h3待办事项应用</h3
<p一个可添加、删除任务的简单 Todo List。</p
</div
<div class=project-card
<h3响应式简历页</h3
<p适配手机和平板的现代简历页面。</p
</div
</div
</div
</section

<section id=contact class=section contact
<div class=container
<h2联系我</h2
<form id=contactForm
<input type=text placeholder=你的名字 required /
<input type=email placeholder=你的邮箱 required /
<textarea rows=5 placeholder=留言内容..、required</textarea
<button type=submit发送消息</button
</form
</div
</section

<! 页脚
<footer class=footer
<div class=container
<p© 2025 小明的网站 | 保留所有权利</p
</div
</footer

<script src=script.js</script
</body
</html

✅ 2、`style.css`（样式美化）

css
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: 333;
background-color: f9f9f9;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* 导航栏 */
.navbar {
background-color: 2c3e50;
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
}

.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.navbar h1 {
font-size: 1.8rem;
}

.navbar ul {
display: flex;
list-style: none;
gap: 2rem;
}

.navbar a {
color: ecf0f1;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}

.navbar a:hover {
color: 3498db;
}

/* 英雄区域 */
.hero {
background: linear-gradient(135deg, 667eea 0%, 764ba2 100%);
color: white;
text-align: center;
padding: 100px 20px;
}

.hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
}

.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}

.hero button {
background-color: 3498db;
color: white;
border: none;
padding: 12px 30px;
font-size: 1rem;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s ease;
}

.hero button:hover {
background-color: 2980b9;
}

/* 普通区块 */
.section {
padding: 80px 0;
background-color: fff;
}

.section h2 {
text-align: center;
font-size: 2.2rem;
margin-bottom: 30px;
color: 2c3e50;
}

/* 技能标签 */
.skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 20px;
}

.skills span {
background-color: 3498db;
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
}

/* 项目卡片 */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}

.project-card {
background-color: f1f1f1;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.project-card:hover {
transform: translateY(-5px);
}

.project-card h3 {
color: 2c3e50;
margin-bottom: 10px;
}

/* 联系表单 */
.contact {
background-color: f0f4f8;
}

contactForm input,
contactForm textarea {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid ccc;
border-radius: 5px;
font-size: 1rem;
}

contactForm button {
background-color: 2c3e50;
color: white;
border: none;
padding: 12px 30px;
font-size: 1rem;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s ease;
}

contactForm button:hover {
background-color: 1a252f;
}

/* 页脚 */
.footer {
background-color: 2c3e50;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 40px;
}

/* 响应式设计 */
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
gap: 1rem;
text-align: center;
}

.hero h2 {
font-size: 2.2rem;
}

.project-grid {
grid-template-columns: 1fr;
}
}

✅ 3、`script.js`（交互逻辑）

javascript
// 表单提交处理
document.getElementById(contactForm).addEventListener(submit, function (e) {
e.preventDefault();
alert(感谢你的留言！我会尽快回复你。);
this.reset(); // 清空表单
});

// 页面滚动锚点平滑跳转
document.querySelectorAll('a[href^=]').forEach(anchor = {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({
top: target.offsetTop 80,
behavior: 'smooth'
});
}
});
});

// 可选：动态显示当前时间
function updateTime() {
const now = new Date();
document.getElementById(timeDisplay)?.textContent = now.toLocaleTimeString();
}
setInterval(updateTime, 1000);

💡 注意：如果想在页面中显示时间，可以在 `index.html` 中加入 `<span id=timeDisplay</span`。

🚀 如何运行这个网站？

1、创建三个文件：
`index.html`
`style.css`
`script.js`

2、将上面的代码分别粘贴进去。

3、用浏览器打开 `index.html` 即可查看效果。

🔧 进阶建议

使用 VS Code 编辑器 + Live Server 插件实现实时预览。
后续可升级为 Vue / React / Next.js 等框架。
部署到 [GitHub Pages](https://pages.github.com/)、[Vercel](https://vercel.com/) 或 [Netlify](https://www.netlify.com/)。

如果你想要的是：
动态网站（如用 Node.js + Express）
数据库支持（如 MySQL / MongoDB）
用户登录系统
响应式博客平台

请告诉我你的具体需求，我可以为你提供更完整的全栈方案！

是否需要我帮你打包成 ZIP？📦

Ai作答

📣 商家广告：