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

【HTML】个人博客页面

article 2025/9/21 20:14:28

页面视图编辑

页面代码

解释：

HTML (<body>):
- 使用了更加语义化的HTML5标签，例如<header>, <main>, <article>, <footer>。
- 文章列表使用了<article>包裹，结构清晰。
- 添加了分页导航。
- 使用了Font Awesome图标，记得替换your-font-awesome-kit.js为你的项目中的Font Awesome。
CSS (<style>):
- 使用了Noto Serif SC作为主要字体，这是一种衬线字体，更适合博客的风格。
- 整体颜色方案更加清新自然，使用了绿色的主色调。
- 对header和footer进行了美化，增加了阴影和过渡效果。
- 文章列表和侧边栏的样式更加精致，使用了圆角和更柔和的阴影。
- 增加了更多的hover效果，例如链接下划线动画、按钮和文章的轻微上移效果。
- 使用了Flexbox布局，使页面结构更加灵活。
- 添加了响应式设计，在移动设备上也能有良好的浏览体验。
JavaScript (<script>):
- 包含了平滑滚动效果，点击#开头的链接时页面会平滑滚动到对应位置。

如何使用：

将代码保存为HTML文件（例如 index.html）。
在浏览器中打开该HTML文件。

页面视图

页面代码

<!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="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet"><style>body {font-family: 'Noto Serif SC', serif; /* 使用 Noto Serif SC */margin: 0;padding: 0;background-color: #f8f8f8;color: #333;line-height: 1.7; /* 增加默认行高 */}.container {max-width: 1200px; /* 增大最大宽度 */margin: 40px auto; /* 增加上下外边距 */padding: 0 30px; /* 增加左右内边距 */}header {background-color: #4CAF50; /* 更现代的颜色 */color: white;padding: 25px 0; /* 增加padding */margin-bottom: 60px; /* 增加下外边距 */box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 增加阴影 */}header .container {display: flex;justify-content: space-between;align-items: center;}.logo {font-size: 2.2em; /* 增大logo字体 */font-weight: bold;transition: transform 0.2s ease-in-out; /* 添加过渡效果 */}.logo:hover {transform: scale(1.05); /* 放大效果 */}nav ul {list-style: none;padding: 0;margin: 0;display: flex;}nav ul li {margin-left: 30px; /* 增加间距 */}nav ul li a {color: white;text-decoration: none;font-size: 1.1em; /* 增加字体大小 */transition: color 0.3s ease; /* 平滑过渡 */position: relative; /* 为了下划线动画 */padding-bottom: 5px; /* 为下划线留出空间 */}nav ul li a:hover {color: #f1f1f1; /* 稍微改变hover颜色 */}nav ul li a::after { /* 添加下划线 */content: '';display: block;width: 0;height: 2px;background: white;position: absolute;left: 0;bottom: 0;transition: width 0.3s ease; /* 下划线过渡效果 */}nav ul li a:hover::after {width: 100%; /* 鼠标悬停时显示完整下划线 */}main {display: flex;gap: 40px; /* 增加gap */}.sidebar {flex: 0 0 300px; /* 增大宽度 */}.content {flex: 1;}.widget {background: white;padding: 30px; /* 增加padding */margin-bottom: 40px; /* 增加margin */border-radius: 8px; /* 增加圆角 */box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 增加阴影 */transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 添加过渡 */}.widget:hover {transform: translateY(-4px); /* 轻微上移 */box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 改变阴影 */}.widget h3 {margin-top: 0;margin-bottom: 25px; /* 增加下边距 */font-size: 1.5em; /* 增大字号 */color: #4CAF50; /* 主题色 */border-bottom: 2px solid #e0e0e0;padding-bottom: 10px;}.widget ul {list-style: none;padding: 0;margin: 0;}.widget ul li {padding: 15px 0; /* 增加padding */border-bottom: 1px solid #e0e0e0;transition: background-color 0.3s ease; /* 添加背景色过渡 */}.widget ul li:last-child {border-bottom: none;}.widget ul li:hover {background-color: #f0f0f0; /* 淡灰色hover效果 */padding-left: 10px; /* 增加左内边距，提供反馈 */}.widget ul li a {color: #333;text-decoration: none;display: block; /* 使整个li可点击 */font-size: 1.1em;}.post {background: white;padding: 30px; /* 增加padding */margin-bottom: 40px; /* 增加margin */border-radius: 8px; /* 增加圆角 */box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 增加阴影 */}.post h2 {margin-top: 0;margin-bottom: 15px; /* 增加下边距 */font-size: 2em; /* 增大字号 */color: #2c3e50; /* 深色标题 */transition: color 0.3s ease;}.post h2:hover {color: #4CAF50; /* 鼠标悬停时改变颜色 */}.post .post-meta {color: #7f8c8d;font-size: 0.95em; /* 稍微增大 */margin-bottom: 20px; /* 增加下边距 */display: flex; /* 使用flex布局 */align-items: center; /* 垂直居中 */gap: 10px; /* 增加作者和日期之间的间距 */}.post .post-meta i { /* 使用图标，例如Font Awesome */margin-right: 5px;color: #95a5a6; /* 更柔和的颜色 */}.post p {font-size: 1.1em; /* 增大默认字号 */line-height: 1.8; /* 增加行高 */color: #444; /* 稍微深一点的颜色 */margin-bottom: 25px; /* 增加段落间距 */}.read-more {display: inline-block;background-color: #4CAF50;color: white;padding: 12px 25px; /* 增加padding */text-decoration: none;border-radius: 6px; /* 稍微减小圆角 */margin-top: 15px; /* 增加上边距 */transition: background-color 0.3s ease, transform 0.2s ease; /* 添加过渡 */font-size: 1.1em;}.read-more:hover {background-color: #45a049;transform: translateY(-2px); /* 轻微上移 */}.pagination { /* 分页样式 */display: flex;justify-content: center;margin-top: 40px;margin-bottom: 20px;}.pagination a, .pagination span {padding: 10px 18px;margin: 0 5px;border-radius: 5px;text-decoration: none;color: #3498db;background-color: #ecf0f1;transition: background-color 0.3s ease, color 0.3s ease;font-size: 1.1em;}.pagination a:hover {background-color: #3498db;color: white;}.pagination .current {background-color: #3498db;color: white;}footer {background-color: #2c3e50;color: white;text-align: center;padding: 30px 0; /* 增加padding */margin-top: 60px; /* 增加margin */border-top: 1px solid #34495e;border-radius: 8px 8px 0 0; /* 上圆角 */}footer .container {display: flex;justify-content: center; /* Center content horizontally */align-items: center;}footer p{font-size: 1.1em;}/* 移动端响应式 */@media (max-width: 768px) {.container {padding: 15px;}header .container {flex-direction: column;text-align: center;}.logo {margin-bottom: 20px;}nav ul {flex-direction: column;align-items: center;}nav ul li {margin-left: 0;margin-top: 15px;}main {flex-direction: column;}.sidebar {width: 100%;margin-bottom: 40px;}.widget {padding: 20px;}.post {padding: 20px;}}/* 更小的屏幕 */@media (max-width: 480px) {.logo {font-size: 1.8em;}nav ul li a {font-size: 1em;}.post h2 {font-size: 1.5em;}.read-more {font-size: 1em;padding: 10px 20px;}.widget h3{font-size: 1.2em;}}</style>
</head>
<body><header><div class="container"><div class="logo">我的博客</div><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我</a></li><li><a href="#">文章</a></li><li><a href="#">作品</a></li><li><a href="#">联系</a></li></ul></nav></div></header><main class="container"><div class="sidebar"><div class="widget"><h3>最新文章</h3><ul><li><a href="#">文章标题一</a></li><li><a href="#">文章标题二</a></li><li><a href="#">文章标题三</a></li></ul></div><div class="widget"><h3>分类</h3><ul><li><a href="#">技术</a></li><li><a href="#">生活</a></li><li><a href="#">旅行</a></li><li><a href="#">摄影</a></li></ul></div><div class="widget"><h3>友情链接</h3><ul><li><a href="#">朋友的博客</a></li><li><a href="#">推荐网站</a></li></ul></div></div><div class="content"><article class="post"><h2>文章标题一：探索未知的领域</h2><p class="post-meta"><i class="far fa-calendar-alt"></i> 2024年5月20日<i class="fas fa-user"></i> 作者：您的名字</p><p>这是一篇关于探索未知领域的文章，我们将在本文中深入探讨一些有趣的话题，例如人工智能的未来发展、宇宙的奥秘以及人类的进化。探索未知是人类的天性，让我们一起踏上这段激动人心的旅程。</p><p>我们还将分享一些实用的技巧和工具，帮助您更好地进行研究和学习。希望这篇文章能够激发您对知识的渴望，并鼓励您勇敢地追求自己的梦想。</p><a href="#" class="read-more"></a></article><article class="post"><h2>文章标题二：记录生活中的美好瞬间</h2><p class="post-meta"><i class="far fa-calendar-alt"></i> 2024年5月18日<i class="fas fa-user"></i> 作者：您的名字</p><p>生活就像一本精彩的书，而我们就是书中的主角。这篇文章将带您一起回顾那些生活中的美好瞬间，例如旅行中的风景、与朋友的聚会以及那些令人难忘的时刻。</p><p>我们相信，记录生活中的美好瞬间可以帮助我们更好地珍惜现在，并为未来的生活增添色彩。希望这篇文章能够触动您内心深处的情感，并鼓励您勇敢地去创造更多美好的回忆。</p><a href="#" class="read-more"></a></article><div class="pagination"><span class="current">1</span><a href="#">2</a><a href="#">3</a><a href="#">下一页</a></div></div></main><footer><div class="container"><p>&copy; 2024 我的博客. All rights reserved. | Design by Your Name</p></div></footer><script>// JavaScript 可以在这里添加交互功能，例如平滑滚动、移动端菜单等document.querySelectorAll('a[href^="#"]').forEach(anchor => {anchor.addEventListener('click', function (e) {e.preventDefault();document.querySelector(this.getAttribute('href')).scrollIntoView({behavior: 'smooth'});});});</script><script src="https://kit.fontawesome.com/your-font-awesome-kit.js" crossorigin="anonymous"></script>
</body>
</html>

【HTML】个人博客页面

目录页面视图编辑页面代码解释： HTML (<body>): 使用了更加语义化的HTML5标签，例如<header>, <main>, <article>, <footer>。文章列表使用了<article>包裹，结构清晰。添加了分页导航。使用了Font…...

编程日记 2025/9/21 20:14:28

论文解读：ICLR2025 | D-FINE

[2410.13842] D-FINE: Redefine Regression Task in DETRs as Fine-grained Distribution Refinement D-FINE 是一款功能强大的实时物体检测器，它将 DETRs 中的边界框回归任务重新定义为细粒度分布细化（FDR），并引入了全局最优定位…...

编程日记 2025/9/19 5:15:26

9.DMA

目录 DMA —为 CPU 减负 DMA 的简介和使用场景 DMA 的例子讲解 STM32 的 DMA 框图和主要特性编辑 DMA 的通道的对应通道外设 – DMA 和哪些外设使用编辑编辑ADC_DR 寄存器地址的计算常见的数据滤波方法 ADCDMA 的编程 DMA —为 CPU 减负 DMA 的简介和使用场…...

编程日记 2025/9/14 10:42:16

大语言模型 10 - 从0开始训练GPT 0.25B参数量补充知识之模型架构 MoE、ReLU、FFN、MixFFN

写在前面 GPT（Generative Pre-trained Transformer）是目前最广泛应用的大语言模型架构之一，其强大的自然语言理解与生成能力背后，是一个庞大而精细的训练流程。本文将从宏观到微观，系统讲解GPT的训练过程，…...

编程日记 2025/9/14 12:31:28

python基础语法（三-中）

基础语法3： 2.列表与元组： <1>.列表、元组是什么？ 都用来存储数据，但是两者有区别，列表可变，元组不可变。 <2>.创建列表： 创建列表有两种方式： [1].a 【】&#x…...

编程日记 2025/9/14 10:37:32

【gitee 初学者矿建仓库】

简易的命令行入门教程: Git 全局设置: git config --global user.name "你的名字"触摸 git config --global user.email "你的邮箱"创建 git 仓库: mkdir codestore cd codestore git init -b "main" touch README.md # 选择运行 git add REA…...

编程日记 2025/9/17 12:36:52

思路收集文档

降低工作量思路 nodejsjava混合网站开发...

编程日记 2025/6/19 11:46:52

OpenCV 光流估计：从原理到实战

在计算机视觉领域，光流估计（Optical Flow Estimation）是一项至关重要的技术，它能够通过分析视频序列中图像像素的运动信息，捕捉物体和相机的运动情况。OpenCV 作为强大的计算机视觉库，为我们提供了高效实现…...

编程日记 2025/7/7 16:03:22

使用HtmlAgilityPack采集墨迹天气中的天气数据

需要解析对应的HTML源码： <div class"left"><div class"wea_alert clearfix"><ul><li><a href "https://tianqi.moji.com/aqi/china/jiangxi/hukou-county" >< span class"level level_2&qu…...

编程日记 2025/6/25 1:09:58

ZTE 7551N 中兴小鲜60 远航60 努比亚小牛解锁BL 刷机包刷root 展讯 T760 bl

ZTE 7551N 中兴小鲜60 远航60 努比亚小牛解锁BL 刷机包刷root 3款机型是一个型号，包通用， ro.product.system.modelZTE 7551N ro.product.system.nameCN_P720S15 #################################### # from generate-common-build-props # Th…...

编程日记 2025/9/20 17:12:26

SearxNG本地搜索引擎

SearxNG 是一个强大、开源的元搜索引擎（meta search engine），它不会存储用户信息，注重隐私保护，并支持从多个搜索引擎聚合结果，用户可以自建部署，打造一个无广告、可定制的搜索平台。 🔍 什么是 SearxNG？ SearxNG 是 Searx 的一个积极维护的分支（fork），意在改进…...

编程日记 2025/7/12 3:33:46

MyBatis 核心组件源码分析

MyBatis 作为 Java 领域最受欢迎的持久层框架之一，以灵活的 SQL 映射和强大的扩展性著称。要真正驾驭 MyBatis，深入理解其核心组件的源码实现是关键。本文将通过源码分析，结合图文并茂的方式，带大家揭开 MyBatis 核心组件的神秘面纱。 1.SqlSessionFactory：会话工厂的核心…...

编程日记 2025/6/5 9:44:49

信息系统项目管理师高级-软考高项案例分析备考指南（2023年案例分析）

个人笔记整理---仅供参考计算题案例分析里的计算题就是进度、挣值分析、预测技术。主要考査的知识点有:找关键路径、求总工期、自由时差、总时差、进度压缩资源平滑、挣值计算、预测计算。计算题是一定要拿下的，做计算题要保持头脑清晰，认真读题把PV、…...

编程日记 2025/9/16 19:32:49

stack和queue简单模拟实现

stackreverse_iteratorqueuepriority_queue仿函数具体代码 stack Stacks are a type of container adaptor, specifically designed to operate in a LIFO context (last-in first-out), where elements are inserted and extracted only from one end of the container. 上述描…...

编程日记 2025/7/2 7:13:28

如何安装双系统？即windows已经安装，如何安装ubuntu 22.04LTS

在已安装 Windows 的电脑上安装 Ubuntu 22.04 LTS 双系统，需通过分区调整、UEFI/BIOS 设置和引导管理实现。以下是详细步骤： 一、准备工作备份数据 • 备份 Windows 中的重要文件（防止分区操作失误导致数据丢失）。下载 Ubu…...

编程日记 2025/6/10 10:21:19

产品经理入门（2）产品体验报告

产品体验报告大纲：重点在产品体验——优点。 1.产品概括可以从各大平台搜产品介绍。 2.市场分析按照产品方向分析各个指标——包括有效使用时间,市场规模等。 3. 用户分析——对用户通过各项指标画像。 4.产品体验——对各项功能与设计的体验。 5.报告总结...

编程日记 2025/9/21 14:47:14

C43-指针与数组

一定义一个指针变量指向数组 1.途径一:指向数组首元素的地址代码示例: #include <stdio.h> int main() {int arr[3]{2,4,5};int *p;p&arr[0];printf("该数组的首元素是:%d",*p);return 0; }成果展示: 报错与总结: 给指针变量赋值时,未在数组首元素前输…...

编程日记 2025/9/18 0:42:04

UDP--DDR--SFP,FPGA实现之ddr读写控制模块

DDR读写控制模块实现介绍由于该模块接口数量较多，为了详细说明模块实现，采用文字流程进行介绍上级模块传输数据到来捕捉数据有效上升沿传输写指令，写有效，写指令成功被下一级模块缓存，进行写地址一次读写长度&…...

编程日记 2025/9/18 23:16:04

云计算与大数据进阶 | 26、解锁云架构核心：深度解析可扩展数据库的5大策略与挑战（上）

在云应用/服务的 5 层架构里，数据库服务层稳坐第 4 把交椅，堪称其中的 “硬核担当”。它的复杂程度常常让人望而生畏，不少人都将它视为整个架构中的 “终极挑战”。不过，也有人觉得可扩展存储系统才是最难啃的 “硬骨头”&#…...

编程日记 2025/9/14 11:13:40

AI Agent | Coze 插件使用指南：从功能解析到实操步骤

一、前言在人工智能技术飞速发展的今天，低代码开发模式正成为构建智能应用的主流趋势。对于希望快速搭建 AI Bot 的开发者和业务人员而言，coze作为一款强大的低代码 AI 开发平台，凭借其高度模块化的插件体系脱颖而出。这些插件就像搭建智能…...

编程日记 2025/9/21 13:29:26

06、基础入门-SpringBoot-依赖管理特性

06、基础入门-SpringBoot-依赖管理特性 Spring Boot 的依赖管理特性是其核心优势之一，极大地简化了项目的构建和维护过程。以下是其主要特点： ## 1. 父项目依赖管理 ### 1.1 继承 spring-boot-starter-parent 在 pom.xml 文件中，通过继承 spr…...

编程日记 2025/7/13 1:59:02

MK米客方德SD NAND:无人机存储的高效解决方案

在无人机技术迅猛发展的当下，飞控系统的数据记录对于飞行性能剖析、故障排查以及飞行安全保障极为关键。以往，SD 卡是飞控 LOG 记录常见的存储介质，但随着技术的革新，新的存储方案不断涌现。本文聚焦于以 ESP32 芯片为主控制器的无…...

编程日记 2025/9/18 10:19:25

【vscode】解决vscode无法安装远程服务器插件问题，显示正在安装

文章目录现状分析采用VSIX离线安装第一步：离线下载插件包第二步：把下载好的插件文件上传到远程服务器上第三步：在windows下打开vscode，并链接远端，进行安装现状分析 vscode无法远程安装扩展插件，显示正在…...

编程日记 2025/9/3 18:36:58

1688 数据接口调用秘籍：高效获取商品实时信息的开发指南

在电商行业竞争白热化的当下，企业想要抢占市场先机，实时掌握商品信息至关重要。作为国内 B2B 电商巨头，1688 平台汇聚海量商品资源，通过高效调用其数据接口获取商品实时信息，能为企业价格策略制定、库存管理、竞品分析…...

编程日记 2025/6/20 12:52:44

【Spring】Spring的请求处理

欢迎来到啾啾的博客🐱。记录学习点滴。分享工作思考和实用技巧，偶尔也分享一些杂谈💬。欢迎评论交流，感谢您的阅读😄。目录引言HTTP/HTTPS协议Spring Web与Spring Web MVCSpring WebFlux 自定义的TPC/IP协议FTP、S…...

编程日记 2025/9/18 0:41:36

粒子群算法（PSO算法）

粒子群算法概述 1.粒子群优化算法（Particle Swarm Optimization，简称PSO）。粒子群优化算法是在1995年由Kennedy博士和Eberhart博士一起提出的，它源于对鸟群捕食行为的研究。 2.基本核心是利用群体中的个体对信息的共享从而使得整…...

编程日记 2025/9/18 11:24:17

git提交库常用词

新功能 feat修改BUG fix文档修改 docs格式修改 style重构 refactor性能提升 perf测试 test构建系统 build对CI配置文件修改 ci修改构建流程、或增加依赖库、工具 chore回滚版本 revert...

编程日记 2025/9/20 5:08:21

LLM智能体新纪元：深入解析MCP与A2A协议，赋能智能自动化协作

LLM智能体（LLM agents）是能够自主行动以实现特定目标的AI系统。在实际应用中，智能体能够将用户请求拆解为多个步骤，利用知识库或API获取数据，最终整合出答案。这让智能体相比于传统独立聊天机器人拥有更强大的能力——…...

编程日记 2025/9/18 8:06:07

SAP学习笔记 - 开发豆知识01 - CDS SDK命令出乱码（cds init CAP-Test03 --add java）

1，现象安装完VSCode以及各种需要的插件（比如SAP CDS Language Support），就可以做CAP开发。用这个命令创建Project：cds init CAP-Test03 --add java 然后出来一个乱码错误 adding java The derived package name c…...

编程日记 2025/9/17 13:15:45

（C语言）超市管理系统（正式版）（指针）（数据结构）（清屏操作）（文件读写）（网页版预告）（html）（js）（json）

目录前言： 源代码： product.h product.c fileio.h fileio.c main.c json_export.h json_export.c tasks.json idex.html script.js 相关步骤： 第一步： 第二步： 第三步： 第四步： 第五步…...

编程日记 2025/9/19 2:15:54

页面视图

页面代码

相关文章：