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.rhkb.cn/news/232617.html

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

相关文章

【数据库原理】（11）SQL数据查询功能

【数据库原理】（11）SQL数据查询功能

基本格式 SELECT [ALL|DISTINCT]<目标列表达式>[,目标列表达式>]... FROM <表名或视图名>[,<表名或视图名>] ... [ WHERE <条件表达式>] [GROUP BY<列名 1>[HAVING <条件表达式>]] [ORDER BY <列名 2>[ASC DESC]];SELECT: 指定要…
阅读更多...
网络知识-以太网技术的发展及网络设备

网络知识-以太网技术的发展及网络设备

目 录 一、背景介绍 &#xff08;一&#xff09;网络技术的时代 &#xff08;二&#xff09;以太网技术脱颖而出 二、以太网的工作原理 &#xff08;一&#xff09;、载波侦听多路访问&#xff08;CSMA/CD&#xff09; 1、数据发送流程 2、发送过程解析 3、…
阅读更多...
CAN协议

CAN协议

文章目录 CAN介绍CAN的优势多主控制通信速度较快&#xff0c;通信距离远具有错误检测、错误通知和错误恢复功能故障封闭功能连接节点多 ISO11519-2物理层特性ISO11898物理层特性CAN 收发芯片 JTA1050 CAN 协议5 种帧5种帧介绍数据帧的构成帧起始仲裁段控制段数据段CRC段ACK段帧…
阅读更多...
应用OpenCV绘制箭头

应用OpenCV绘制箭头

绘制箭头函数 方法&#xff1a;函数cv2.arrowedLine( ) 语法格式&#xff1a;cv2.arrowedLine(img, pt1, pt2, color[, thickness[, line_type[, shift[, tipLength]]]]) 参数说明&#xff1a; img&#xff1a;要画的直线所在的图像&#xff0c;也称为画布。。 pt1&#x…
阅读更多...
ubuntu 22 virt-manger(kvm)安装winxp； ubuntu22体验 firebird3.0

ubuntu 22 virt-manger(kvm)安装winxp； ubuntu22体验 firebird3.0

安装 、启动 virt-manager sudo apt install virt-manager sudo systemctl start libvirtdsudo virt-manager安装windowsXP 安装过程截图如下 要点1 启用 “包括寿终正寝的操作系统” win_xp.iso 安装过程 &#xff1a; 从winXp.iso启动, 执行完自己重启从硬盘重启&#xff0c…
阅读更多...
【已解决】Invalid bound statement (not found)

【已解决】Invalid bound statement (not found)

报错讯息 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.casey.mapper.SysRoleMapper.getUserRoleCode at org.apache.ibatis.binding.MapperMethod S q l C o m m a n d . < i n i t > ( M a p p e r M e t h o d . j a v a :…
阅读更多...
基于java,springboot的论旅游管理系统设计与实现

基于java,springboot的论旅游管理系统设计与实现

环境以及简介 基于java,springboot的论旅游管理系统设计与实现&#xff0c;Java项目&#xff0c;SpringBoot项目&#xff0c;含开发文档&#xff0c;源码&#xff0c;数据库以及ppt 源码下载 环境配置&#xff1a; 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服…
阅读更多...
关于“Python”的核心知识点整理大全65

关于“Python”的核心知识点整理大全65

目录 20.2.19 设置 SECRET_KEY 20.2.20 将项目从 Heroku 删除 注意 20.3 小结 附录 A 安装Python A.1.1 确定已安装的版本 A.1.2 在 Linux 系统中安装 Python 3 A.2 在 OS X 系统中安装 Python A.2.1 确定已安装的版本 A.2.2 使用 Homebrew 来安装 Python 3 注意 …
阅读更多...
[C#]使用DlibDotNet人脸检测人脸68特征点识别人脸5特征点识别人脸对齐人脸比对FaceMesh

[C#]使用DlibDotNet人脸检测人脸68特征点识别人脸5特征点识别人脸对齐人脸比对FaceMesh

【官方框架地址】 https://github.com/takuya-takeuchi/DlibDotNet 【算法介绍】 DlibDotNet是一个开源的.NET库&#xff0c;用于实现机器学习和计算机视觉应用。它基于C库dlib&#xff0c;通过C/CLI封装了dlib的所有功能&#xff0c;为.NET开发者提供了简单易用的API。以下是…
阅读更多...
缘分的计算

缘分的计算

题目描述&#xff1a; 缘分是一个外国人难以理解的中文名词。大致说来&#xff0c;缘分是一种冥冥中将两人&#xff08;通常是情人&#xff09;结合的力量。仅管这是种迷信&#xff0c;很多人——特别是女生——喜欢去计算它。 不幸的是&#xff0c;644 也是这样。有天&#x…
阅读更多...
Oracle-深入了解cache buffer chain

Oracle-深入了解cache buffer chain

文章目录 1.Cache buffer chain介绍2.Buffer cache的工作原理3 Buffer chains4.Multi-versioning of Buffers5.Latches6.诊断CBC latch等待7.解决 CBC Latch等待 1.Cache buffer chain介绍 经常看到会话等待事件“latch&#xff1a;cache buffers chain”。 如果想知道意味着什…
阅读更多...
vue3 + TS + vite 搭建中后台管理系统（完整项目）

vue3 + TS + vite 搭建中后台管理系统（完整项目）

vue3 TS vite 搭建中后台管理系统&#xff08;完整项目&#xff09; 前言1、搭建步骤及方法2、集成多种插件功能&#xff0c;实现中后台按需使用3、新手学TS如何快速进入状态、定义TS类型4、layout搭建四款常见风格6、大屏搭建效果5、vue3Ts运营管理系统总结&#xff1a; 前言…
阅读更多...
力扣hot100 将有序数组转换为二叉搜索树 递归

力扣hot100 将有序数组转换为二叉搜索树 递归

&#x1f468;‍&#x1f3eb; 题目地址 时间复杂度&#xff1a; O ( n ) O(n) O(n) &#x1f60b; AC code /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNod…
阅读更多...
JMeter之测试WebService接口

JMeter之测试WebService接口

JMeter之测试WebService接口 1 背景2 目的3 介绍4 具体操作4.1 soapUI调用4.2 JMeter工具调用4.3 操作步骤流程4.3 重点 1 背景 WebService应用的范围是非常广&#xff0c;任何需要跨平台、跨系统进行数据交换和功能调用的场景都可以用此来实现&#xff0c;在实际的工作中也常常…
阅读更多...
案例介绍｜钡铼助力2023年全国职业院校技能大赛工业网络智能控制与维护赛项

案例介绍｜钡铼助力2023年全国职业院校技能大赛工业网络智能控制与维护赛项

如今&#xff0c;越来越多的企业开始意识到数字制造和工业物联网已经成为工业自动化中大规模生产的核心驱动力。这其中&#xff0c;工业网络作为基础设施&#xff0c;是实现工厂设备联网与数据采集&#xff0c;建设数字工厂的基础和前提&#xff0c;甚至成为关乎数字工厂能否真…
阅读更多...
如何恢复Mac误删文件？

如何恢复Mac误删文件？

方法1. 使用撤消命令 当你在 Mac 上删除了错误的文件并立即注意到你的错误时&#xff0c;你可以使用撤消命令立即恢复它。顾名思义&#xff0c;此命令会反转上次完成的操作&#xff0c;并且有多种方法可以调用它。如果你已经采取了其他操作或退出了用于删除文件的应用程序&…
阅读更多...
网络安全B模块（笔记详解）- 数字取证

网络安全B模块（笔记详解）- 数字取证

数据分析数字取证-attack 1.使用Wireshark查看并分析Windows 7桌面下的attack.pcapng数据包文件，通过分析数据包attack.pcapng找出恶意用户的IP地址，并将恶意用户的IP地址作为Flag（形式：[IP地址]）提交; 解析：http.request.method==POST ​ Flag：[172.16.1.102] 2.继续…
阅读更多...
Linux内核--进程管理(六)内核进程管理几种CPU调度策略

Linux内核--进程管理(六)内核进程管理几种CPU调度策略

目录 一、引言 二、CPU调度的直观想法 ------>2.1、FIFO ------>2.2、Priority ------>2.3、调度矛盾 三、各种CPU调度算法 ------>3.1、FCFS(First Come，First Served) ------>3.2、SJF(Short Job First，短作业优先) ------>3.3、RR算法(按时间片…
阅读更多...
[足式机器人]Part2 Dr. CAN学习笔记-动态系统建模与分析 Ch02-3流体系统建模

[足式机器人]Part2 Dr. CAN学习笔记-动态系统建模与分析 Ch02-3流体系统建模

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-动态系统建模与分析 Ch02-12课程介绍电路系统建模、基尔霍夫定律 流量 flow rate q q q m 3 / s m^3/s m3/s 体积 volume V V V m 3 m^3 m3 高度 heigh h h h m m m 压强 pressure p p p …
阅读更多...
Java：爬虫htmlunit

Java：爬虫htmlunit

为什么htmlunit与HttpClient两者都可以爬虫、网页采集、通过网页自动写入数据&#xff0c;我们会推荐使用htmlunit呢? 一、网页的模拟化 首先说说HtmlUnit相对于HttpClient的最明显的一个好处&#xff0c;HtmlUnit更好的将一个网页封装成了一个对象&#xff0c;如果你非要说H…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发