个人主页网页设计,2日本私人vps,VPS Windows 服务器系统迁移,云主机免备案免费,vps数据库多大

🗣 Wd提问: 个人主页网页设计

🤖 Ai回答:
当然可以！下面是一个简洁、现代的个人主页网页设计方案，适合用于展示个人信息、技能、项目、博客等内容。你可以根据自己的需求进行调整。

🌐 个人主页网页设计（HTML + CSS + JS 基础结构）

🔹 页面结构（HTML）

html
<!DOCTYPE html
<html lang=zh
<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

<! 导航栏
<nav class=navbar
<div class=container
<h2 class=logoYourName</h2
<ul class=nav-links
<li<a href=home首页</a</li
<li<a href=about关于我</a</li
<li<a href=skills技能</a</li
<li<a href=projects项目</a</li
<li<a href=contact联系我</a</li
</ul
</div
</nav

<! 首页横幅
<section id=home class=hero
<div class=container
<h1你好，我是 YourName</h1
<p前端开发者 | 设计爱好者 | 终身学习者</p
<a href=projects class=btn查看我的项目</a
</div
</section

<! 关于我
<section id=about class=about
<div class=container
<img src=profile.jpg alt=头像 class=profile-img /
<div class=text
<h2关于我</h2
<p我是一名热爱技术与设计的前端开发者，擅长使用 HTML、CSS、JavaScript 和 React 构建响应式网站。我喜欢挑战新问题，并持续学习新技术。</p
<p目前在某某公司担任前端工程师，业余时间喜欢写博客和参与开源项目。</p
</div
</div
</section

<! 技能
<section id=skills class=skills
<div class=container
<h2我的技能</h2
<div class=skill-list
<div class=skill<spanHTML/CSS</span<div class=bar<div class=progress html</div</div</div
<div class=skill<spanJavaScript</span<div class=bar<div class=progress js</div</div</div
<div class=skill<spanReact</span<div class=bar<div class=progress react</div</div</div
<div class=skill<spanUI/UX 设计</span<div class=bar<div class=progress design</div</div</div
</div
</div
</section

<! 项目展示
<section id=projects class=projects
<div class=container
<h2我的项目</h2
<div class=project-grid
<div class=project-card
<img src=project1.jpg alt=项目1 /
<h3在线简历生成器</h3
<p使用 React 和 Tailwind CSS 构建的响应式简历工具。</p
<a href= target=_blank查看详情</a
</div
<div class=project-card
<img src=project2.jpg alt=项目2 /
<h3天气应用</h3
<p调用 OpenWeather API 实现的实时天气查询系统。</p
<a href= target=_blank查看详情</a
</div
<div class=project-card
<img src=project3.jpg alt=项目3 /
<h3个人博客平台</h3
<p基于 Node.js 和 MongoDB 搭建的轻量级博客系统。</p
<a href= target=_blank查看详情</a
</div
</div
</div
</section

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

<! 页脚
<footer
<div class=container
<p© 2025 YourName、版权所有。</p
<div class=social-links
<a href=https://github.com/yourname target=_blankGitHub</a
<a href=https://linkedin.com/in/yourname target=_blankLinkedIn</a
<a href=mailto:you@65.hk邮箱</a
</div
</div
</footer

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

🎨 样式设计（CSS 示例）

css
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', sans-serif;
line-height: 1.6;
color: 333;
}

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

/* 导航栏 */
.navbar {
background: fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
z-index: 1000;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: 4a90e2;
font-size: 1.8rem;
}
.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: 333;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: 4a90e2;
}

/* 首页横幅 */
.hero {
height: 100vh;
background: linear-gradient(135deg, 667eea 0%, 764ba2 100%);
color: white;
display: flex;
align-items: center;
text-align: center;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.btn {
background: fff;
color: 667eea;
padding: 12px 30px;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
display: inline-block;
transition: transform 0.3s;
}
.btn:hover {
transform: scale(1.05);
}

/* 关于我 */
.about {
padding: 100px 0;
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.about .text {
flex: 1;
min-width: 300px;
}
.about h2 {
margin-bottom: 1rem;
color: 4a90e2;
}

/* 技能条 */
.skills {
padding: 80px 0;
background: f9f9f9;
}
.skill-list {
max-width: 600px;
margin-top: 20px;
}
.skill {
margin-bottom: 20px;
}
.skill span {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.bar {
height: 10px;
background: ddd;
border-radius: 5px;
overflow: hidden;
}
.progress {
height: 100%;
background: 4a90e2;
border-radius: 5px;
}
.progress.html { width: 90%; }
.progress.js { width: 85%; }
.progress.react { width: 80%; }
.progress.design { width: 70%; }

/* 项目展示 */
.projects {
padding: 80

Ai作答

📣 商家广告：