从零搭建博客网站：HTML + CSS + JavaScript 实战教程
一、创建项目结构
首先在本地创建一个项目文件夹：
mkdir myblog cd myblog
在其中创建基础结构：
myblog/ │-- index.html │-- post.html │-- style.css │-- main.js │-- posts/ │ │-- post1.html │ │-- post2.html │-- images/
这个结构包含首页、文章页、样式文件、脚本文件以及静态资源目录。
二、编写首页 HTML
创建 index.html 文件：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的技术博客</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <h1 class="logo">MyBlog</h1> <nav> <a href="index.html" class="active">首页</a> <a href="about.html">关于我</a> <a href="contact.html">联系</a> </nav> </div> </header> <section class="hero"> <h2>分享前端与全栈开发的知识</h2> <p>记录从小白到全栈的学习之路</p> </section> <section class="posts" id="postList"> <!-- 动态加载博客文章 --> </section> <footer> <p>© 2025 MyBlog | 由 HTML + CSS + JS 驱动</p> </footer> <script src="main.js"></script> </body> </html>
三、编写基础样式 style.css
body { margin: 0; font-family: "Microsoft YaHei", sans-serif; background-color: #f5f6f7; color: #333; } header { background-color: #1f2937; color: white; padding: 15px 0; } .container { width: 90%; margin: auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; } nav a { color: white; text-decoration: none; margin: 0 10px; } nav a:hover, nav a.active { border-bottom: 2px solid #00bfff; } .hero { text-align: center; padding: 60px 20px; background: linear-gradient(120deg, #00bfff, #4facfe); color: white; } .posts { width: 80%; margin: 40px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .post-card { background-color: white; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.2s; } .post-card:hover { transform: translateY(-5px); } .post-card img { width: 100%; height: 180px; object-fit: cover; } .post-card .content { padding: 15px; } footer { background-color: #1f2937; color: white; text-align: center; padding: 15px; }
四、创建博客文章列表（JavaScript 动态加载）
编写 main.js 文件，实现首页自动生成文章列表：
const posts = [ { title: "HTML 从入门到实践", desc: "了解 HTML 的结构、标签与语义化写法。", image: "images/html.jpg", link: "posts/post1.html", date: "2025-03-12" }, { title: "CSS 布局实战：Flex 与 Grid", desc: "彻底掌握现代网页布局的核心。", image: "images/css.jpg", link: "posts/post2.html", date: "2025-04-01" } ]; const postList = document.getElementById("postList"); posts.forEach(post => { const card = document.createElement("div"); card.className = "post-card"; card.innerHTML = ` <img src="${post.image}" alt="${post.title}"> <div class="content"> <h3>${post.title}</h3> <p>${post.desc}</p> <small>${post.date}</small><br> <a href="${post.link}" class="read-more">阅读更多 →</a> </div> `; postList.appendChild(card); });
五、创建第一篇文章 post1.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML 从入门到实践 - MyBlog</title> <link rel="stylesheet" href="../style.css"> <style> article { width: 80%; margin: 40px auto; line-height: 1.8; } pre { background: #f0f0f0; padding: 10px; border-radius: 6px; } </style> </head> <body> <header> <div class="container"> <h1 class="logo">MyBlog</h1> <nav> <a href="../index.html">首页</a> <a href="../about.html">关于我</a> </nav> </div> </header> <article> <h2>HTML 从入门到实践</h2> <p>HTML（超文本标记语言）是网页的骨架，用来定义页面的结构与内容。</p> <h3>1. 基本结构</h3> <pre> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的网页</title> </head> <body> <h1>你好，HTML！</h1> </body> </html> </pre> <h3>2. 常用标签</h3> <ul> <li><h1>~<h6>：标题</li> <li><p>：段落</li> <li><a>：超链接</li> <li><img>：图片</li> <li><div>：容器块</li> </ul> <h3>3. 表单示例</h3> <pre> <form> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button>提交</button> </form> </pre> </article> <footer> <p>© 2025 MyBlog | 原创教程</p> </footer> </body> </html>
六、创建第二篇文章 post2.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS 布局实战 - MyBlog</title> <link rel="stylesheet" href="../style.css"> <style> article { width: 80%; margin: 40px auto; line-height: 1.8; } code { background: #eee; padding: 2px 5px; border-radius: 3px; } </style> </head> <body> <header> <div class="container"> <h1 class="logo">MyBlog</h1> <nav> <a href="../index.html">首页</a> </nav> </div> </header> <article> <h2>CSS 布局实战：Flex 与 Grid</h2> <p>在现代前端开发中，布局是网页设计的核心。Flex 和 Grid 是目前最主流的布局方式。</p> <h3>1. Flex 布局示例</h3> <pre> .container { display: flex; justify-content: space-between; align-items: center; } </pre> <h3>2. Grid 布局示例</h3> <pre> .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; } </pre> <h3>3. 响应式设计</h3> <p>使用媒体查询让网站在手机上自动适配：</p> <pre> @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } } </pre> </article> <footer> <p>© 2025 MyBlog | 原创教程</p> </footer> </body> </html>
七、实现返回顶部功能
在 main.js 文件末尾添加：
const backToTop = document.createElement('button'); backToTop.textContent = '↑ 返回顶部'; backToTop.className = 'backTop'; document.body.appendChild(backToTop); window.addEventListener('scroll', () => { if (window.scrollY > 300) backToTop.style.display = 'block'; else backToTop.style.display = 'none'; }); backToTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });
在 style.css 添加：
.backTop { position: fixed; right: 20px; bottom: 30px; background-color: #00bfff; color: white; border: none; padding: 10px 15px; border-radius: 50%; cursor: pointer; display: none; }
八、让博客支持手机端访问
添加媒体查询到 style.css：
@media (max-width: 768px) { .container { flex-direction: column; text-align: center; } nav a { display: block; margin: 5px 0; } .posts { width: 95%; } }
此时，无论电脑还是手机，都能完美显示博客内容。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)