html5实现好看的个人博客模板源码

文章目录

  • 1.设计来源
    • 1.1 主界面
    • 1.2 认识我界面
    • 1.3 我的文章界面
    • 1.4 我的模板界面
    • 1.5 文章内容界面
  • 2.结构和源码
    • 2.1 目录结构
    • 2.2 源代码
  • 源码下载

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/135368653

html5实现好看的个人博客模板，个人空间源码，个人主页源码，模板分为，首页、认识我，我的文章，我的模板，文章内容等页面，在此基础上可根据博客模板，扩展更多的功能，统一的风格，代码上手简单，代码独立，可以直接使用。也可直接预览效果。如有代码问题可以私信联系博主，帮忙解决。

1.设计来源

1.1 主界面

    主界面，分为左右两个板块，左边博客菜单列表+博客内容；右边是个人图标+个人信息内容展示。不同板块链接展示。页面底部，相关版权信息。这为模板界面，可以支持变更自己喜欢的风格，主题色调的调整，代码扩展方便，上手容易。

在这里插入图片描述

1.2 认识我界面

    认识我界面，分为左右两个板块，左边博客菜单列表+博客内容；右边是个人图标+个人信息内容展示。不同板块链接展示。页面底部，相关版权信息。这为模板界面，可以支持变更自己喜欢的风格，主题色调的调整，代码扩展方便，上手容易。
在这里插入图片描述

1.3 我的文章界面

    我的文章界面，分为左右两个板块，左边博客菜单列表+博客内容；右边是个人图标+个人信息内容展示。不同板块链接展示。页面底部，相关版权信息。这为模板界面，可以支持变更自己喜欢的风格，主题色调的调整，代码扩展方便，上手容易。
在这里插入图片描述

1.4 我的模板界面

    我的模板界面，分为左右两个板块，左边博客菜单列表+博客内容；右边是个人图标+个人信息内容展示。不同板块链接展示。页面底部，相关版权信息。这为模板界面，可以支持变更自己喜欢的风格，主题色调的调整，代码扩展方便，上手容易。
在这里插入图片描述

1.5 文章内容界面

    文章内容界面，分为左右两个板块，左边博客菜单列表+博客内容；右边是个人图标+个人信息内容展示。不同板块链接展示。页面底部，相关版权信息。这为模板界面，可以支持变更自己喜欢的风格，主题色调的调整，代码扩展方便，上手容易。
在这里插入图片描述

2.结构和源码

2.1 目录结构

在这里插入图片描述

2.2 源代码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xcLeigh博客</title>
<meta name="keywords" content="个人博客模板,xcLeigh" />
<meta name="description" content="个人博客模板,xcLeigh" />
<link href="images/favicon.png" rel="icon">
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/media.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="ibody"><header><h1>码上有你</h1><h2>我有我个性，我由我主宰，我有自己的一片天空。我有我自己创造的未来....</h2><div class="logo"><a href="https://blog.csdn.net/weixin_43151418"></a></div><nav id="topnav"><a href="index.html">首页</a><a href="about.html">认识我</a><a href="newlist.html">我的文章</a><a href="share.html">我的模板</a><a href="new.html">文章内容</a></nav></header><article><div class="banner"><ul class="texts"><p>我有我个性，我由我主宰，我有自己的一片天空。我有我自己创造的未来。 </p><p>闻人之谤当自修，闻人之誉当自惧。</p></ul></div><div class="bloglist"><h2><p><span>记录</span>我的日常</p></h2><div class="blogs"><h3><a href="https://blog.csdn.net/weixin_43151418">程序员请放下你的技术情节，与你的同伴一起进步</a></h3><figure><img src="images/01.jpg" ></figure><ul><p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p><a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="readmore">查看更多&gt;&gt;</a></ul><p class="autor"><span>2023-12-04</span><span>作者：xcLiegh</span><span>个人博客：[<a href="https://blog.csdn.net/weixin_43151418">程序人生</a>]</span><span><a href="#">459</a>浏览</span><span><a href="#">30</a>点赞</span></p><div class="dateview">2023-12-04</div></div><div class="blogs"><h3><a href="https://blog.csdn.net/weixin_43151418">程序员请放下你的技术情节，与你的同伴一起进步</a></h3><figure><img src="images/02.jpg" ></figure><ul><p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p><a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="readmore">查看更多&gt;&gt;</a></ul><p class="autor"><span>2023-12-01</span><span>作者：xcLiegh</span><span>个人博客：[<a href="/news/life/">程序人生</a>]</span><span><a href="#">459</a>浏览</span><span><a href="#">30</a>点赞</span></p><div class="dateview">2023-12-01</div></div><div class="blogs"><h3><a href="https://blog.csdn.net/weixin_43151418">程序员请放下你的技术情节，与你的同伴一起进步</a></h3><figure><img src="images/03.jpg" ></figure><ul><p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p><a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="readmore">查看更多&gt;&gt;</a></ul><p class="autor"><span>2023-11-24</span><span>作者：xcLiegh</span><span>个人博客：[<a href="https://blog.csdn.net/weixin_43151418">程序人生</a>]</span><span><a href="#">459</a>浏览</span><span><a href="#">30</a>点赞</span></p><div class="dateview">2023-11-24</div></div><div class="blogs"><h3><a href="https://blog.csdn.net/weixin_43151418">程序员请放下你的技术情节，与你的同伴一起进步</a></h3><figure><img src="images/04.jpg" ></figure><ul><p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p><a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="readmore">查看更多&gt;&gt;</a></ul><p class="autor"><span>2023-11-14</span><span>作者：xcLiegh</span><span>个人博客：[<a href="https://blog.csdn.net/weixin_43151418">程序人生</a>]</span><span><a href="#">459</a>浏览</span><span><a href="#">30</a>点赞</span></p><div class="dateview">2023-11-14</div></div><div class="blogs"><h3><a href="https://blog.csdn.net/weixin_43151418">程序员请放下你的技术情节，与你的同伴一起进步</a></h3><figure><img src="images/04.png" ></figure><ul><p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p><a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="readmore">查看更多&gt;&gt;</a></ul><p class="autor"><span>2023-10-14</span><span>作者：xcLiegh</span><span>个人博客：[<a href="https://blog.csdn.net/weixin_43151418">程序人生</a>]</span><span><a href="#">459</a>浏览</span><span><a href="#">30</a>点赞</span></p><div class="dateview">2023-10-14</div></div></div></article><aside><div class="avatar"><a href="about.html"><span>码上有你</span></a></div><div class="topspaceinfo"><h1>英文昵称:xcLeigh</h1><p>业精于勤而荒于嬉，行成于思而毁于随。</p></div><div class="about_c"><p>xcLeigh | 30</p><p>活出自己、活出精彩 </p><p>北京市、朝阳区</p><p>15511001100</p><p>myemail@126.com</p></div><div class="bdsharebuttonbox"><a href="#" class="bds_qzone" data-cmd="qzone" title="分享QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享微信"></a><a href="#" class="bds_more" data-cmd="more" title="更多分享"></a></div><div class="tj_news"><h2><p class="tj_t1">常用工具</p></h2><ul><li><a href="https://blog.csdn.net/weixin_43151418/article/details/134458927">二维码生成</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/134437021">图片处理</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/134613121">瀑布流源码</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/131412565">各种导航菜单合集</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/134467729">翻页相册源码</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/126462346">好看的鼠标源码</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/125842089">多种轮播图合集</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/131343002">时间轴合集</a></li></ul><h2><p class="tj_t2">源码下载</p></h2><ul><li><a href="https://blog.csdn.net/weixin_43151418/article/details/125642161">好看的邀请函</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/127964115">恋爱表白源码</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/128288153">清新的个人博客</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/135054910">商城网站源码</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/134899691">视频网站源码</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/125351391">音乐网站源码</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/127736068">个人主页、个人空间</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/128028326">个人常用导航源码</a></li></ul></div><div class="links"><h2><p>个人简历</p></h2><ul><li><a href="https://blog.csdn.net/weixin_43151418/article/details/131273315">精致个人简历模板</a></li><li><a href="https://blog.csdn.net/weixin_43151418/article/details/131265259">清新个人简历模板</a></li></ul></div><div class="copyright"><ul><p> Design by <a href="/">xcLeigh</a></p><p>京ICP备2023号-1</p></p></ul></div></aside>
</div>
<div style="text-align:center; padding: 40px;">
<p>个人博客 <a href="https://blog.csdn.net/weixin_43151418" target="_blank" title="xcLeigh">xcLeigh</a>- @ CopyRight 2023 <a href="https://blog.csdn.net/weixin_43151418/article/details/134682321" target="_blank" title="xcLeigh">源码模板</a> </p>
</div>
</body>
</html>

源码下载

html5实现好看的个人博客模板源码（源码） 点击下载
在这里插入图片描述

--------------- 业精于勤，荒于嬉 ---------------

请添加图片描述

--------------- 行成于思，毁于随 ---------------

     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/135368653（防止抄袭，原文地址不可删除）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/602798.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言第三方库Melon开箱即用之词法分析器使用

C语言第三方库Melon开箱即用之词法分析器使用

之前的文章中&#xff0c;笔者介绍了Linux/UNIX C语言库Melon的基本功能及框架使用。 本文将介绍Melon中的词法分析器组件。 Melon的Github仓库为&#xff1a;https://github.com/Water-Melon/Melon 词法分析器在Melon中并不依赖于自身框架&#xff0c;因此可以在不初始化框…
阅读更多...
Core Web Vitals

Core Web Vitals

Core Web Vitals 是 Google 提出的一组用于衡量网页用户体验质量的指标。它们专注于三个方面&#xff1a;加载性能&#xff08;Largest Contentful Paint&#xff0c;LCP&#xff09;、交互性&#xff08;First Input Delay&#xff0c;FID&#xff09;和视觉稳定性&#xff08…
阅读更多...
2024 年江苏省职业院校技能大赛高职软件测试赛项规程

2024 年江苏省职业院校技能大赛高职软件测试赛项规程

2024 年江苏省职业院校技能大赛高职软件测试赛项规程 需要竞赛资源可私信博主&#xff01; 一、赛项名称 赛项编号&#xff1a;JSG202429 赛项名称&#xff1a;软件测试 赛项组别&#xff1a;高职学生组、高职教师组赛项归属专业大类&#xff1a;电子信息 二、竞赛目的 软件是…
阅读更多...
详解Keras3.0 Callbacks API : TensorBoard（可视化工具）

详解Keras3.0 Callbacks API : TensorBoard（可视化工具）

TensorBoard TensorBoard是TensorFlow提供的可视化工具。需要安装TensorFlow才能使用此回调。此回调记录TensorBoard的事件&#xff0c;包括&#xff1a;度量汇总图、训练图可视化、重量直方图、采样剖面。 keras.callbacks.TensorBoard(log_dir"logs",histogram_…
阅读更多...
vue3防抖函数封装与使用，以指令的形式使用

vue3防抖函数封装与使用，以指令的形式使用

utils/debounce.js /*** 防抖函数* param {*} fn 函数* param {*} delay 暂停时间* returns */ export function debounce(fn, delay 500) {let timer nullreturn function (...args) {// console.log(arguments);// const args Array.from(arguments)if (timer) {clearTim…
阅读更多...
docker部署simpleDocker

docker部署simpleDocker

1&#xff0c;安装docker&#xff0c;请参考 linux安装docker 2&#xff0c;安装docker-compose&#xff0c;请参考 Docker-Compose 3&#xff0c;安装simpleDocker 准备docker-compose.yml文件 version: 3 services:redis:container_name: redisimage: redis:latestweb:conta…
阅读更多...
imgaug库指南（八）：从入门到精通的【图像增强】之旅

imgaug库指南（八）：从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…
阅读更多...
Linux top命令教程：实时监控系统状态和进程(附实例详解和注意事项)

Linux top命令教程：实时监控系统状态和进程(附实例详解和注意事项)

Linux top命令介绍 top命令&#xff08;Table of Processes&#xff09;是Linux中用来监视系统运行状态和查看系统中运行的进程的实时动态管理命令。它可以显示系统的总体信息&#xff0c;包括运行时间、负载、运行的进程数、CPU使用率、内存使用率等。 Linux top命令适用的L…
阅读更多...
mysql原理--事务

mysql原理--事务

1.事务的起源 对于大部分程序员来说&#xff0c;他们的任务就是把现实世界的业务场景映射到数据库世界。比如银行为了存储人们的账户信息会建立一个 account 表&#xff1a; CREATE TABLE account (id INT NOT NULL AUTO_INCREMENT COMMENT 自增id,name VARCHAR(100) COMMENT …
阅读更多...
java 常⽤的线程池模式ScheduledThreadPool

java 常⽤的线程池模式ScheduledThreadPool

用于定时或周期性地执行任务。 可以设置任务的延迟执行时间或执行周期。 使用场景&#xff1a;适用于需要定时执行任务的应用程序&#xff0c;如定时清理缓存、定时发送邮件等。 import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorServ…
阅读更多...
excel统计分析——两因素有重复方差分析

excel统计分析——两因素有重复方差分析

参考资料&#xff1a;生物统计学 无重复观测值的两因素方差分析只能研究两个因素的主效应&#xff0c;不能考察因素间的交互作用&#xff0c;只有在确定因素间不存在交互作用时才能进行无重复观测值的试验和分析。为了准确估计因素的主效应、交互作用和随机误差&#xff0c;每个…
阅读更多...
K8S学习指南(66)-CRD介绍

K8S学习指南(66)-CRD介绍

文章目录 引言什么是自定义资源定义&#xff08;CRD&#xff09;&#xff1f;CRD 对于 Kubernetes 的意义1. 定制资源类型2. 统一管理3. 更好的扩展性4. 与生态系统集成 如何使用 CRDCRD 的规范详解1. apiVersion 和 kind2. metadata.name3. spec.group 和 spec.versions4. spe…
阅读更多...
061：vue中通过map修改一维数组，增加一些变量

061：vue中通过map修改一维数组，增加一些变量

第061个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…
阅读更多...
K8S-应用部署

K8S-应用部署

1 应用管理解读 2 应用部署实践 资源对象管理关系 资源对象管理实践 手工方式&#xff1a; kubectl run pod名称 --imageimage地址资源清单方式: apiVersion: v1 kind: Pod metadata:labels:run: my-podname: my-pod spec:containers:- image: kubernetes-register.sswang.co…
阅读更多...
Ubuntun构建本地源详细教程

Ubuntun构建本地源详细教程

联网主机上下载软件包并打包 首先使用一台已连接互联网的同版本ubuntu主机添加国内镜像源 mv /etc/apt/sources.list /etc/apt/sources.list.bak vim /etc/apt/sources.list# 写入下面的内容： deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiv…
阅读更多...
jenkins安装报错：No such plugin: cloudbees-folder

jenkins安装报错：No such plugin: cloudbees-folder

jenkins安装报错&#xff1a;No such plugin: cloudbees-folder 原因是缺少cloudbees-folder.hpi插件 解决&#xff1a; 一&#xff0c;重新启动 http://xxx:8800/restart 二&#xff0c;跳到重启界面时&#xff0c;点击系统设置 三&#xff0c;找到安装插件&#xff0c;然…
阅读更多...
1-03C语言超基础语法

1-03C语言超基础语法

一、概述 为了更好的进行后续的课程&#xff0c;避免出现"老师&#xff0c;我还没学过的东西&#xff0c;你怎么直接用&#xff1f;"诸如此类疑问&#xff0c;本小节就诞生了。 实际上&#xff0c;整个第一个大章节的所有小节都是"C语言基础语法"&#x…
阅读更多...
【js逆向】爬虫之进程，线程，协程

【js逆向】爬虫之进程，线程，协程

目录 1、进程 1.1 进程定义 1.2 创建进程 1.2.1 创建单个进程 1.2.2 进程池 2、线程 2.1 线程定义 2.2 创建线程 2.2.1 创建单个线程 2.2.2 线程池
阅读更多...
C/C++ 枚举

C/C++ 枚举

目录 枚举概述 枚举的使用 枚举的大小计算 枚举的优点 C语言中的自定义类型有&#xff1a;结构 位段 枚举 联合 枚举概述 枚举顾名思义就是一一列举&#xff0c;把可能的取值一一列举。 比如我们现实生活中&#xff1a;一周的星期一到星期日是有限的7天&#xff0c…
阅读更多...
动手学深度学习之卷积神经网络之池化层

动手学深度学习之卷积神经网络之池化层

池化层 卷积层对位置太敏感了&#xff0c;可能一点点变化就会导致输出的变化&#xff0c;这时候就需要池化层了&#xff0c;池化层的主要作用就是缓解卷积层对位置的敏感性 二维最大池化 这里有一个窗口&#xff0c;来滑动&#xff0c;每次我们将窗口中最大的值给拿出来 还是上…
阅读更多...
最新文章

Copyright @ 2022~2023