当前位置：首页 > news >正文

从零开始打造个人博客：我的网页设计之旅

news 来源：原创 2025/7/20 7:04:35

在这里插入图片描述

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
✨特色专栏：国学周更-心性养成之路
🥭本文内容：从零开始打造个人博客：我的网页设计之旅

文章目录

- 引言
- 项目结构
- - 1. 文件夹结构
  - 2. 文件详细说明
- 页面设计
- - 1. 主页 (index.html)
  - 2. 关于我 (about.html)
  - 3. 博客文章 (blog.html)
  - 4. 联系我 (contact.html)
- CSS 样式 (styles.css)
- 小结

引言

在数字化时代，个人博客不仅是一个展示自我的平台，更是一个分享知识、经验和创意的空间。无论是记录生活点滴、分享学习心得，还是讨论感兴趣的话题，个人博客都能为我们提供一个独特的声音和视角。随着互联网的普及，越来越多的人开始意识到拥有一个个人博客的重要性。

在这个项目中，我决定从零开始构建一个简单的个人博客网站，旨在通过实践掌握网页设计的基本技能。这个项目不仅让我深入了解HTML和CSS的基本用法，还让我体验到网页设计的乐趣和挑战。

我选择了四个主要页面：主页、关于我、博客文章和联系我。每个页面都有其独特的功能和设计，旨在为访问者提供良好的用户体验。在主页上，我希望能够给读者留下深刻的第一印象；在关于我页面中，我想分享我的背景和兴趣，以便读者更好地了解我；博客文章页面则是我分享思想和观点的地方；而联系我页面则为读者提供了与我互动的机会。

通过这个项目，我不仅希望提升自己的技术能力，还希望能够创造一个能够吸引读者的空间。接下来，我将详细介绍项目的结构、页面设计以及我在开发过程中所遇到的挑战和解决方案。希望这篇博文能够激励更多的人踏上自己的网页设计之旅！

项目结构

在构建个人博客项目时，合理的项目结构是确保代码可维护性和可扩展性的关键。以下是我项目的详细结构说明，包括每个文件的功能和作用。

1. 文件夹结构

个人博客/
│
├── index.html          # 主页
├── about.html          # 关于我页面
├── blog.html           # 博客文章页面
├── contact.html        # 联系我页面
├── styles.css          # CSS样式文件
└── myphoto.jpg         # 个人照片（用于关于我页面）

2. 文件详细说明

index.html - 主页

主页是用户访问博客的第一印象，设计上应简洁明了，能够有效传达博客的主题和目的。主页包含以下元素：

网站标题：展示博客的名称，吸引读者的注意。
导航栏：提供链接到其他页面的菜单，方便用户浏览。
欢迎信息：简要介绍博客的内容和目的，营造友好的氛围。

主页的设计旨在让读者感受到温暖和欢迎，同时引导他们探索更多内容。

about.html - 关于我页面

关于我页面是展示个人背景和兴趣的地方，帮助读者更好地了解博客作者。该页面包含：

个人介绍：简要描述自己的背景、兴趣和写作动机。
照片：一张个人照片，增加亲切感和可信度。

通过这个页面，我希望能够与读者建立更深的联系，让他们了解我的故事和写作的初衷。

blog.html - 博客文章页面

博客文章页面是我分享思想和观点的核心部分。该页面的设计包括：

文章标题和摘要：列出几篇博客文章的标题和简要摘要，吸引读者点击阅读。
可扩展性：为未来添加更多文章留出空间，确保页面的灵活性。

这个页面的目标是展示我的写作内容，并鼓励读者深入阅读每篇文章。

contact.html - 联系我页面

联系我页面为读者提供了与我互动的机会，包含以下元素：

联系表单：允许读者填写姓名、邮箱和消息，方便我与他们进行沟通。
提交按钮：用户填写完信息后，可以通过点击按钮发送消息。

这个页面的设计旨在鼓励读者与我交流，分享他们的想法和反馈。

styles.css - CSS样式文件

CSS样式文件负责整个网站的视觉效果和布局。通过统一的样式设置，确保所有页面在外观上保持一致。样式文件包括：

字体和颜色：设置全局字体、背景颜色和文本颜色，营造整体风格。
布局：定义各个元素的排版和间距，使页面看起来整洁有序。
响应式设计：确保网站在不同设备上（如手机、平板和电脑）都能良好显示。

样式文件的设计是提升用户体验的关键，良好的视觉效果能够吸引读者并鼓励他们停留更长时间。

页面设计

1. 主页 (index.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="styles.css">
</head>
<body><header><h1>欢迎来到我的个人博客</h1><nav><ul><li><a href="index.html">主页</a></li><li><a href="about.html">关于我</a></li><li><a href="blog.html">博客文章</a></li><li><a href="contact.html">联系我</a></li></ul></nav></header><main><h2>欢迎信息</h2><p>这是我的个人博客，分享我的生活和学习。</p></main><footer><p>© 2023 个人博客</p></footer>
</body>
</html>

2. 关于我 (about.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="styles.css">
</head>
<body><header><h1>关于我</h1><nav><ul><li><a href="index.html">主页</a></li><li><a href="about.html">关于我</a></li><li><a href="blog.html">博客文章</a></li><li><a href="contact.html">联系我</a></li></ul></nav></header><main><h2>个人介绍</h2><p>我是一个热爱编程和写作的大学生。</p><img src="myphoto.jpg" alt="我的照片"></main><footer><p>© 2023 个人博客</p></footer>
</body>
</html>

3. 博客文章 (blog.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="styles.css">
</head>
<body><header><h1>博客文章</h1><nav><ul><li><a href="index.html">主页</a></li><li><a href="about.html">关于我</a></li><li><a href="blog.html">博客文章</a></li><li><a href="contact.html">联系我</a></li></ul></nav></header><main><h2>我的第一篇博客</h2><p>这是我的第一篇博客文章的摘要。</p><h2>我的第二篇博客</h2><p>这是我的第二篇博客文章的摘要。</p></main><footer><p>© 2023 个人博客</p></footer>
</body>
</html>

4. 联系我 (contact.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="styles.css">
</head>
<body><header><h1>联系我</h1><nav><ul><li><a href="index.html">主页</a></li><li><a href="about.html">关于我</a></li><li><a href="blog.html">博客文章</a></li><li><a href="contact.html">联系我</a></li></ul></nav></header><main><h2>联系表单</h2><form><label for="name">姓名:</label><input type="text" id="name" name="name" required><label for="email">邮箱:</label><input type="email" id="email" name="email" required><label for="message">消息:</label><textarea id="message" name="message" required></textarea><button type="submit">发送</button></form></main><footer><p>© 2023 个人博客</p></footer>
</body>
</html>

CSS 样式 (styles.css)

为了使网页看起来更美观，我使用了简单的CSS样式。以下是样式文件的内容：

/* 全局样式 */
body {font-family: 'Arial', sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;line-height: 1.6;
}/* 头部样式 */
header {background: #35424a;color: #ffffff;padding: 20px 0;text-align: center;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}/* 导航栏样式 */
nav ul {list-style: none;padding: 0;
}nav ul li {display: inline;margin: 0 15px;
}nav ul li a {color: #ffffff;text-decoration: none;font-weight: bold;transition: color 0.3s;
}nav ul li a:hover {color: #f4f4f4; /* 鼠标悬停时的颜色变化 */
}/* 主体样式 */
main {padding: 20px;max-width: 800px; /* 限制主内容区域的最大宽度 */margin: 20px auto; /* 居中显示 */background: #ffffff; /* 背景为白色 */border-radius: 8px; /* 圆角效果 */box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}/* 标题样式 */
h1, h2 {color: #35424a; /* 统一标题颜色 */
}/* 段落样式 */
p {margin: 15px 0; /* 段落上下间距 */
}/* 图片样式 */
img {max-width: 100%; /* 确保图片在容器内自适应 */height: auto; /* 保持图片比例 */border-radius: 8px; /* 圆角效果 */
}/* 表单样式 */
form {display: flex;flex-direction: column; /* 垂直排列 */margin-top: 20px;
}label {margin-bottom: 5px; /* 标签与输入框间距 */font-weight: bold; /* 标签加粗 */
}input[type="text"],
input[type="email"],
textarea {padding: 10px;border: 1px solid #ccc; /* 边框颜色 */border-radius: 4px; /* 圆角效果 */margin-bottom: 15px; /* 输入框间距 */font-size: 16px; /* 字体大小 */
}button {padding: 10px;background-color: #35424a; /* 按钮背景颜色 */color: #ffffff; /* 按钮文字颜色 */border: none; /* 去掉边框 */border-radius: 4px; /* 圆角效果 */cursor: pointer; /* 鼠标悬停时显示手型 */transition: background-color 0.3s; /* 背景颜色变化 */
}button:hover {background-color: #4a5a6a; /* 鼠标悬停时的背景颜色 */
}/* 页脚样式 */
footer {text-align: center;padding: 10px 0;background: #35424a;color: #ffffff;position: relative;bottom: 0;width: 100%;
}/* 响应式设计 */
@media (max-width: 600px) {nav ul li {display: block; /* 在小屏幕上垂直排列 */margin: 10px 0; /* 上下间距 */}main {padding: 10px; /* 减少主内容区域的内边距 */}
}

小结

通过本次个人博客项目的开发，我不仅掌握了静态网页的基本结构和样式设计，还深入理解了HTML和CSS的应用。这次实践让我认识到，理论知识与实际操作相结合是学习网页设计的关键。在设计过程中，我注重用户体验，力求通过简洁的导航和美观的布局为读者提供良好的浏览体验。同时，我也意识到良好的代码结构和注释对于项目的可维护性至关重要。通过不断学习和接受反馈，我的技术能力得到了提升，未来我希望继续探索前端开发的更多可能性，创造出更具吸引力和互动性的作品。这次经历不仅增强了我的实践能力，也让我对网页设计有了更深入的理解，期待在未来的项目中继续应用这些经验！

码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。

在这里插入图片描述

从零开始打造个人博客：我的网页设计之旅

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 ✨特色专栏&#xff1a…...

编程日记 2025/7/20 7:04:35

用python将一个扫描pdf文件改成二值图片组成的pdf文件

使用墨水屏读书现在似乎越来越流行，这确实有一定的好处，例如基本不发热，电池续航时间超长，基本不能游戏所以有利于沉浸式阅读，还有不知道是不是真的有用的所谓防蓝光伤害。但是，如果阅读的书籍是扫描图片组…...

编程日记 2025/7/20 11:03:29

Electron开发构建工具electron-vite(alex8088)添加VueDevTools(VitePlugin)

零、介绍本文章的electron-vite指的是这个项目👉electron-vite仓库，electron-vite网站本文章的VueDevTools指的是VueDevTools的Vite插件版👉https://devtools.vuejs.org/guide/vite-plugin 一、有一个用electron-vite创建的项目略二、…...

编程日记 2025/7/15 8:59:16

服务器数据恢复—raid5阵列热备盘上线失败导致EXT3文件系统不可用的数据恢复案例

服务器数据恢复环境： 两组分别由4块SAS硬盘组建的raid5阵列，两组阵列划分的LUN组成LVM架构，格式化为EXT3文件系统。服务器故障： 一组raid5阵列中的一块硬盘离线。热备盘自动上线替换离线硬盘，但在热备盘上线同步数据…...

编程日记 2025/7/20 11:27:59

网络安全基础——网络安全法

填空题 1.根据**《中华人民共和国网络安全法》**第二十条(第二款)，任何组织和个人试用网路应当遵守宪法法律，遵守公共秩序，遵守社会公德，不危害网络安全，不得利用网络从事危害国家安全、荣誉和利益，煽动颠…...

编程日记 2025/7/20 11:15:44

go-rod vs Selenium：自动化测试工具的比较与选择

自动化测试是软件开发过程中的关键环节，它能够帮助我们发现缺陷、验证功能并提高软件质量。随着Web技术的快速发展，市场上出现了多种自动化测试工具，其中Selenium和go-rod是两个备受关注的选择。本文将从多个维度对这两个工具进行比较&#x…...

编程日记 2025/7/19 20:03:59

Ubuntu20.04+ROS 进行机械臂抓取仿真：环境搭建（一）

目录一、从官网上下载UR机械臂二、给UR机械臂添加夹爪三、报错解决本文详细介绍如何在Ubuntu20.04ROS环境中为Universal Robots的UR机械臂添加夹爪。首先从官方和第三方源下载必要的软件包，包括UR机械臂驱动、夹爪插件和相关依赖。然后，针对gazeb…...

编程日记 2025/7/20 11:23:18

Pytorch微调深度学习模型

在公开数据训练了模型，有时候需要拿到自己的数据上微调。今天正好做了一下微调，在此记录一下微调的方法。用Pytorch还是比较容易实现的。网上找了很多方法，以及Chatgpt也给了很多方法，但是不够简洁和容易理解。大体步骤是&…...

编程日记 2025/7/20 11:34:09

PPT分享 | IBM集团业务流程架构顶层规划-订单到交付-销售到回款方案

PPT下载链接见文末~ IBM业务流程规划方法是一套结构化、体系化的流程设计理论，其企业流程框架（EPF）是一种用于企业业务流程架构设计梳理的方法论。一、IBM业务流程规划方法的核心 IBM的BPM（业务流程管理）流程管理体…...

编程日记 2025/7/20 11:14:27

后端并发编程操作简述 Java高并发程序设计六类并发容器七种线程池四种阻塞队列

目录并发集合 1. ConcurrentHashMap： 2. CopyOnWriteArrayList： 3. CopyOnWriteArraySet： 4. BlockingQueue系列： 5. ConcurrentSkipListMap 和 ConcurrentSkipListSet： 6. ConcurrentLinkedDeque：…...

编程日记 2025/7/20 10:59:50

基于LLama_factory的Qwen2.5大模型的微调笔记

Qwen2.5大模型微调记录 LLama-facrotyQwen2.5 模型下载。huggingface 下载方式Modelscope 下载方式数据集准备模型微调模型训练模型验证及推理模型导出部署推理vllm 推理Sglang 推理 LLama-facroty 根据git上步骤安装即可，要求的软硬件都装上。 llama-factory运行…...

编程日记 2025/7/20 11:16:44

resnet50,clip，Faiss+Flask简易图文搜索服务

一、实现文件夹目录结构： templates -----upload.html faiss_app.py 前端代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widt…...

编程日记 2025/7/20 11:06:46

亚信安全与飞书达成深度合作

近日，亚信安全联合飞书举办的“走近先进”系列活动正式走进亚信。活动以“安全护航信息化共筑数字未来路”为主题，吸引了众多数字化转型前沿企业的近百位领导参会。作为“走近先进”系列的第二场活动，本场活动更加深入挖掘了数字化转型的基础…...

编程日记 2025/7/20 11:22:10

Spring框架特性及包下载（Java EE 学习笔记04）

1 Spring 5的新特性 Spring 5是Spring当前最新的版本，与历史版本对比，Spring 5对Spring核心框架进行了修订和更新，增加了很多新特性，如支持响应式编程等。更新JDK基线因为Spring 5代码库运行于JDK 8之上，所以Spri…...

编程日记 2025/7/20 11:17:44

.net 8使用hangfire实现库存同步任务

C# 使用HangFire 第一章：.net Framework 4.6 WebAPI 使用Hangfire 第二章：net 8使用hangfire实现库存同步任务文章目录 C# 使用HangFire前言项目源码一、项目架构二、项目服务介绍HangFire服务结构解析HangfireCollectionExtensions 类ModelHangfireSettingsHttpAuthInfoUs…...

编程日记 2025/7/19 15:44:11

python VS c++

一、语法特点 Python： 语法简洁、优雅，代码可读性极强，采用缩进来表示代码块，摒弃了像 C 那样使用大括号的传统方式，使得代码看上去十分清晰简洁。例如： if 5 > 3:print("5大于3") elif 5 …...

编程日记 2025/7/14 11:05:12

windows C#-属性

属性提供了一种将元数据或声明性信息与代码(程序集、类型、方法、属性等)关联的强大方法。将属性与程序实体关联后，可以使用称为反射的技术在运行时查询该属性。属性具有以下属性： 属性将元数据添加到您的程序中。元数据是有关程序中定义的类型的信息…...

编程日记 2025/7/19 13:58:41

Redis常见面试题总结(上)

Redis 基础什么是 Redis？ Redis （REmote DIctionary Server）是一个基于 C 语言开发的开源 NoSQL 数据库（BSD 许可）。与传统数据库不同的是，Redis 的数据是保存在内存中的（内存数据库&#xf…...

编程日记 2025/7/19 16:45:00

小鹏汽车智慧材料数据库系统项目总成数据同步

1、定时任务处理 2、提供了接口小鹏方面提供的推送的数据表结构： 这几个表总数为100多万，经过条件筛选过滤后大概2万多条数据小鹏的人给的示例图： 界面： SQL: -- 查询车型 select bmm.md_material_id, bmm.material_num, bm…...

编程日记 2025/7/12 1:47:38

风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计

风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计简介在前端开发的世界里，HTML5和CSS3是构建现代网页的基石。本文将通过一个简单的HTML5页面模板，展示如何使用HTML5的结构化元素和CSS3的样式特性，来创建一个…...

编程日记 2025/7/15 20:21:49

论文阅读：A fast, scalable and versatile tool for analysis of single-cell omics data

Zhang, K., Zemke, N.R., Armand, E.J. et al. A fast, scalable and versatile tool for analysis of single-cell omics data. Nat Methods 21, 217–227 (2024). 论文地址：https://doi.org/10.1038/s41592-023-02139-9 代码地址：https://github.com…...

编程日记 2025/7/19 12:54:51

【从零开始的LeetCode-算法】43. 网络延迟时间

有 n 个网络节点，标记为 1 到 n。给你一个列表 times，表示信号经过有向边的传递时间。 times[i] (ui, vi, wi)，其中 ui 是源节点，vi 是目标节点， wi 是一个信号从源节点传递到目标节点的时间。现在，…...

编程日记 2025/7/16 5:24:45

一文理解 Python 编程语言中的 .strip() 方法

🍉 CSDN 叶庭云：https://yetingyun.blog.csdn.net/ Python 中的 strip() 方法：初学者友好指南在 Python 中，strip() 是一个极为实用的字符串方法，主要用于移除字符串首尾的特定字符。默认情况下，它会清除…...

编程日记 2025/7/19 23:26:03

solr 远程命令执行 (CVE-2019-17558)

漏洞描述 Apache Velocity是一个基于Java的模板引擎，它提供了一个模板语言去引用由Java代码定义的对象。Velocity是Apache基金会旗下的一个开源软件项目，旨在确保Web应用程序在表示层和业务逻辑层之间的隔离（即MVC设计模式）。 Apa…...

编程日记 2025/7/16 15:25:33

【cocos creator】下拉框

https://download.csdn.net/download/K86338236/90038176 const { ccclass, property } cc._decorator;type DropDownOptionData {optionString?: string,optionSf?: cc.SpriteFrame } type DropDownItemData {label: cc.Label,sprite: cc.Sprite,toggle: cc.Toggle }cccl…...

编程日记 2025/7/9 7:40:06