网硕互联帮助中心
"学了HTML/CSS/JS这么久，我居然做不出一个完整的网站？" —— 这就像背了无数菜谱却炒不出一盘蛋炒饭。别担心！今天我们就用1个小时，从零开始打造一个既漂亮又实用的个人博客/简历网站！
一、项目规划：先画蓝图再施工
1.1 网站结构设计
– 首页（展示个人简介+最新文章）
– 博客页（文章列表+分类）
– 项目集（作品展示）
– 关于页（详细简历+技能树）
– 联系页（表单+社交链）
1.2 技术选型
// 轻量级技术栈：
– HTML5：语义化结构
– CSS3：Flexbox/Grid布局
– 少量JavaScript：交互增强
– 无框架：纯原生实现（适合初学者）
二、HTML搭建：网站的"骨架"
2.1 基础结构
<!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="styles.css">
</head>
<body>
<header class="site-header">
<h1>码农小明</h1>
<p>前端开发 | 技术博客 | 项目作品</p>
</header>
<nav class="main-nav">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#blog">博客</a></li>
<li><a href="#projects">项目</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
<main class="content">
<!– 各页面内容将在这里动态切换 –>
</main>
<footer class="site-footer">
<p>© 2023 码农小明 – 保留所有权利</p>
</footer>
<script src="script.js"></script>
</body>
</html>
三、CSS设计：网站的"颜值担当"
3.1 响应式布局核心代码
/* 移动优先设计 */
.main-nav ul {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* 平板及以上 */
@media (min-width: 768px) {
.main-nav ul {
flex-direction: row;
justify-content: center;
}
.content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
}
/* 桌面端 */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
3.2 美观的卡片设计
.article-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease;
}
.article-card:hover {
transform: translateY(-5px);
}
.article-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.article-card-content {
padding: 1.5rem;
}
四、JavaScript交互：网站的"小魔法"
4.1 简易页面切换
// 页面切换功能
document.querySelectorAll('.main-nav a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const pageId = this.getAttribute('href').substring(1);
loadPage(pageId);
});
});
function loadPage(pageId) {
fetch(`${pageId}.html`)
.then(response => response.text())
.then(html => {
document.querySelector('.content').innerHTML = html;
window.scrollTo(0, 0);
});
}
4.2 图片轮播实现
class SimpleSlider {
constructor(selector) {
this.slides = document.querySelectorAll(selector);
this.currentIndex = 0;
this.interval = null;
}
start() {
this.interval = setInterval(() => {
this.next();
}, 3000);
}
next() {
this.slides[this.currentIndex].classList.remove('active');
this.currentIndex = (this.currentIndex + 1) % this.slides.length;
this.slides[this.currentIndex].classList.add('active');
}
}
// 使用示例
const slider = new SimpleSlider('.slider img');
slider.start();
五、项目亮点：让简历脱颖而出的技巧
5.1 技能雷达图
/* HTML结构 */
<div class="skills-radar">
<div class="skill" data-skill="HTML" data-level="90"></div>
<div class="skill" data-skill="CSS" data-level="85"></div>
<div class="skill" data-skill="JavaScript" data-level="75"></div>
</div>
/* CSS动画 */
@keyframes grow {
from { transform: scale(0); }
to { transform: scale(1); }
}
.skill {
animation: grow 1s ease-out forwards;
transform-origin: center;
}
5.2 项目展示画廊
// 点击缩略图查看大图
document.querySelectorAll('.project-thumbnail').forEach(thumb => {
thumb.addEventListener('click', () => {
const fullImage = thumb.getAttribute('data-fullsize');
openModal(fullImage);
});
});
function openModal(imageSrc) {
const modal = document.createElement('div');
modal.className = 'project-modal';
modal.innerHTML = `
<div class="modal-content">
<span class="close">×</span>
<img src="${imageSrc}" alt="项目大图">
</div>
`;
document.body.appendChild(modal);
}
六、完整项目开发流程
6.1 开发步骤分解
Day 1：完成HTML结构和基础样式
Day 2：实现响应式布局和导航
Day 3：添加JavaScript交互功能
Day 4：优化细节和动画效果
Day 5：测试和部署上线
6.2 项目目录结构
my-blog/
├── index.html
├── styles/
│ ├── main.css
│ ├── responsive.css
├── js/
│ ├── main.js
│ ├── slider.js
├── images/
│ ├── avatar.jpg
│ ├── projects/
├── blog/
│ ├── post1.html
七、常见问题排雷指南
Q：导航菜单在小屏幕上不显示？
A：检查媒体查询是否正确定义，确保没有z-index冲突
Q：图片轮播卡顿？
A：优化图片大小，使用will-change: transform提升性能
Q：表单提交无效？
A：确保<form>标签有正确的action和method属性
八、项目部署：让全世界看到你的作品
8.1 免费托管方案
GitHub Pages：
git init
git add .
git commit -m "首次提交"
git branch -M main
git remote add origin 你的仓库地址
git push -u origin main
然后在仓库设置中开启GitHub Pages
Vercel：拖拽上传zip文件即可部署
8.2 自定义域名（可选）
购买域名（阿里云/GoDaddy）
配置DNS解析到GitHub Pages
在仓库设置中添加自定义域名
九、项目扩展：让你的作品更出色
添加博客系统：集成Hexo或Jekyll
接入评论功能：使用Disqus或Gitalk
SEO优化：添加meta标签和结构化数据
数据分析：接入Google Analytics
结语：从"跟着做"到"自己创造"
记住，这个项目只是起点！尝试添加你自己的特色功能：
-
暗黑模式切换
-
多语言支持
-
动画效果增强
思考题：
如何在不使用框架的情况下实现更复杂的页面路由？
有哪些方法可以进一步优化网站的加载速度？
如何让这个网站在移动设备上有更好的体验？
欢迎在评论区分享你的作品链接
评论前必须登录！
注册