一、为什么记录网页制作过程
在制作个人网站的过程中，经常会遇到页面排版、颜色搭配、手机适配、链接跳转、文件上传等问题。 如果每次遇到问题都重新查找资料，不仅浪费时间，也不利于长期积累。
所以我把自己在网页制作中遇到的常见问题和处理方法整理成记录页面，方便以后快速查看， 也可以作为个人学习网页制作的笔记。
二、网页页面结构记录
一个简单清晰的网页，通常可以分为几个部分：顶部导航、主视觉区域、正文内容、侧边栏和底部信息。 结构清楚以后，后期修改页面会更方便。
常见页面结构
- 顶部导航：放网站名称、首页链接和栏目入口。
- 主视觉区域：展示页面标题和简单介绍。
- 正文内容：放主要文章、教程或学习记录。
- 侧边栏：放目录、相关内容或快捷链接。
- 底部信息：放版权说明、备案说明或返回首页链接。
<section>页面标题区域</section>
<main>正文内容</main>
<aside>侧边栏内容</aside>
<footer>底部信息</footer>
三、网页排版经验
网页排版不一定要复杂，个人网站更适合简洁、清楚、容易阅读的风格。 字体、间距、颜色和内容宽度，是影响阅读体验的几个关键因素。
排版时需要注意
- 正文不要铺满整个屏幕，内容宽度控制在 900px 到 1100px 比较舒服。
- 标题和正文之间要有足够间距，避免页面显得拥挤。
- 颜色不要太多，主色控制在 1 到 2 个即可。
- 手机端要能正常显示，不能只考虑电脑页面。
- 按钮、卡片、列表要保持统一风格。
四、样式调整方法
网页样式主要通过 CSS 控制。比如背景颜色、文字大小、按钮圆角、卡片阴影、手机端适配等， 都可以通过 CSS 修改。
常用 CSS 记录
background: #f5f7fb;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
.card {
background: #ffffff;
border-radius: 18px;
padding: 28px;
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}
如果想让页面看起来更现代，可以适当使用圆角、阴影、浅色背景和卡片式布局。 但不要过度装饰，否则页面会变得杂乱。
五、常见问题处理
1. 页面上传后打不开
需要检查文件名是否正确，路径是否正确，GitHub Pages 是否开启。 例如文件放在 articles 文件夹里，访问链接也要带上 articles。
2. 图片不显示
大多数情况是图片路径写错了。建议图片统一放在 images 文件夹里， 然后使用相对路径引用。
3. 手机端排版错乱
需要添加响应式代码，让页面在小屏幕下自动变成单列显示。
.layout {
grid-template-columns: 1fr;
}
}
4. 修改后网页没有变化
可能是浏览器缓存问题，可以按 Ctrl + F5 强制刷新。 也可以等 GitHub Pages 自动更新完成后再查看。
六、上传到网站的基本流程
- 在电脑上新建一个 HTML 文件，例如 web-design-notes.html。
- 把本页面代码完整复制进去。
- 登录 GitHub，进入自己的网站仓库。
- 进入 articles 文件夹，如果没有就新建一个。
- 点击 Add file，选择 Upload files。
- 上传 web-design-notes.html 文件。
- 点击 Commit changes 保存。
- 等待 1 到 3 分钟后打开网页链接查看。
七、学习总结
网页制作不是一次完成的事情，而是不断修改、测试和优化的过程。 对个人网站来说，最重要的是内容真实、结构清楚、访问方便。
以后如果继续学习 HTML、CSS、JavaScript、GitHub Pages、网站备案和 SEO 优化， 都可以继续整理成类似的记录页面，慢慢形成自己的学习资料库。
返回首页