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

news2024/11/17 5:44:00

文章目录

  • 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.coloradmin.cn/o/1352570.html

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

相关文章

ExecutorCompletionService详解

ExecutorCompletionService详解

本文已收录至Github&#xff0c;推荐阅读 &#x1f449; Java随想录 微信公众号&#xff1a;Java随想录 文章目录 摘要ExecutorCompletionService适用场景ExecutorCompletionService使用ExecutorCompletionService原理解析注意事项总结 摘要 ExecutorCompletionService 是Jav…
阅读更多...
LeetCode做题总结 15. 三数之和（未完）

LeetCode做题总结 15. 三数之和（未完）

不会做&#xff0c;参考了代码随想录和力扣官方题解&#xff0c;对此题进行整理。 代码思路 思想&#xff1a;利用双指针法&#xff0c;对数组从小到大排序。先固定一个数&#xff0c;找到其他两个。 &#xff08;1&#xff09;首先对数组从小到大排序。 &#xff08;2&…
阅读更多...
【网络技术】【Kali Linux】Wireshark嗅探（四）域名系统（DNS）

【网络技术】【Kali Linux】Wireshark嗅探（四）域名系统（DNS）

一、实验目的 本次实验使用wireshark流量分析工具进行网络嗅探&#xff0c;旨在了解域名系统&#xff08;DNS&#xff09;的工作原理。 二、域名系统概述 简单来说&#xff0c;域名系统&#xff08;Domain Name System, DNS&#xff09;将域名&#xff08;可以理解为“网址”…
阅读更多...
为什么要用扫码出入库？

为什么要用扫码出入库？

一、什么是扫码出入库管理系统 传统的仓库管理模式存在很多问题&#xff0c;如&#xff1a;货物积压、过期、丢失等。这些问题不仅影响了企业的正常运营&#xff0c;还给企业带来了经济损失。为了解决这些问题&#xff0c;扫码出入库管理系统应运而生。该系统采用先进的二维码…
阅读更多...
Apache的配置与应用

Apache的配置与应用

目录 1、Apache简介 2、Apache连接保持 3、Apache的访问控制 3.1、客户机地址限制 3.2、用户授权限制 &#xff08;1&#xff09;创建用户认证数据文件 &#xff08;2&#xff09;添加用户授权配置 &#xff08;3&#xff09;验证用户访问授权 4、Apache日志分割 4…
阅读更多...
Vivado JESD204B与AD9162建立通信实战总结

Vivado JESD204B与AD9162建立通信实战总结

一、FPGA与AD9162的JESD204B接口 FPGA作为JESD204B接口的发送端&#xff0c;AD9162作为JESD204B接口的接收端。FPGA和AD9162的device clk、SYSREF由同源时钟芯片产生。其中&#xff0c;FPGA和AD9162的divice clk时钟不同&#xff0c;并且FPGA的decive clk等同于JESD204B IP的co…
阅读更多...
【UnityShader入门精要学习笔记】（3）章节答疑

【UnityShader入门精要学习笔记】（3）章节答疑

本系列为作者学习UnityShader入门精要而作的笔记&#xff0c;内容将包括&#xff1a; 书本中句子照抄 个人批注项目源码一堆新手会犯的错误潜在的太监断更&#xff0c;有始无终 总之适用于同样开始学习Shader的同学们进行有取舍的参考。 文章目录 复习&#xff08;阶段性总结…
阅读更多...
数据分析案例-外国电影票房数据可视化分析（文末送书）

数据分析案例-外国电影票房数据可视化分析（文末送书）

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…
阅读更多...
k8s 1.23.5版本安装ingress1.6.4

k8s 1.23.5版本安装ingress1.6.4

1、背景 网上找了好几个ingress 文件&#xff0c;可能是版本没对&#xff0c;ingress都没有安装成功&#xff0c;最后查了相关资料&#xff0c;手动安装了。 下面是版本的匹配列表 github中ingress 地址&#xff1a;https://github.com/kubernetes/ingress-nginx 1.23.5版本支…
阅读更多...
MySQL的安装网络配置

MySQL的安装网络配置

目录 一. MySQL5.7的安装 二. MySQL8.0的安装 三. 配置网络访问 思维导图 一. MySQL5.7的安装 1. 解压 2. 将my.ini文件放入到解压文件中 3. 编辑my.ini文件&#xff0c;将路径改为当前路径 4. 进到bin目录下&#xff0c;以管理员身份打开cmd命令窗口 5. 安装MySQL服务 my…
阅读更多...
HarmonyOS调研分享

HarmonyOS调研分享

经过十多年的发展&#xff0c;传统移动互联网的增长红利已渐见顶。万物互联时代正在开启&#xff0c;应用的设备底座将从几十亿手机扩展到数百亿 IoT 设备。GSMA 预测到 2025 年&#xff0c;全球物联网终端连接数量将达 246 亿个&#xff0c;其中消费物联网终端连接数量将达 11…
阅读更多...
chatGPT带你学习设计模式 (二)抽象工厂模式(创建型模式) GURU

chatGPT带你学习设计模式 (二)抽象工厂模式(创建型模式) GURU

深入理解抽象工厂模式 引言 在面向对象编程中&#xff0c;对象的创建是一个常见且关键的挑战。尤其在需要管理一系列相关对象的创建时&#xff0c;传统的对象创建方法&#xff08;如直接使用 new 关键字&#xff09;可能导致代码的高耦合和低灵活性。这时&#xff0c;抽象工厂…
阅读更多...
5+共病+WGCNA+机器学习+免疫浸润，经典共病生信思路，轻松拿5+

5+共病+WGCNA+机器学习+免疫浸润，经典共病生信思路，轻松拿5+

今天给同学们分享一篇生信文章“Identification of biomarkers for the diagnosis of chronic kidney disease (CKD) with non-alcoholic fatty liver disease (NAFLD) by bioinformatics analysis and machine learning”&#xff0c;这篇文章发表在Front Endocrinol (Lausann…
阅读更多...
Spring-Retry 重试框架使用

Spring-Retry 重试框架使用

一、Spring-Retry Spring-Retry框架是Spring自带的功能&#xff0c;具备间隔重试、包含异常、排除异常、控制重试频率等特点&#xff0c;是项目开发中很实用的一种框架。 支持手动调用方式和注解方式。 使用需引入下面依赖&#xff1a; <dependency><groupId>o…
阅读更多...
Vue：脚手架Vue-CLI的使用

Vue：脚手架Vue-CLI的使用

一、环境准备 vue脚手架&#xff08;vue-CLI&#xff09;的使用是基于nodejs环境下的。 你可以简单理解为&#xff0c;Java项目需要再jvm虚拟机上才能编译运行 nodejs的作用就是将vue文件编译成html、css、js代码文件。 如何安装nodejs 参考&#xff1a;https://blog.csdn.net…
阅读更多...
Uibot (RPA设计软件）培训前期准备指南————课前材料

Uibot (RPA设计软件）培训前期准备指南————课前材料

紧接着小北的上一篇博客&#xff0c;友友们我们即将开展新课的学习~RPA 培训前期准备指南——安装Uibot(RPA设计软件&#xff09;-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/135348488?spm1001.2014.3001.5502 课程安排如下&#xff1a; 序号 日期 内容 视…
阅读更多...
五、Spring AOP面向切面编程（基于注解方式实现和细节）

五、Spring AOP面向切面编程（基于注解方式实现和细节）

本章概要 Spring AOP底层技术组成初步实现获取通知细节信息切点表达式语法重用&#xff08;提取&#xff09;切点表达式环绕通知切面优先级设置CGLib动态代理生效注解实现小结 5.5.1 Spring AOP 底层技术组成 动态代理&#xff08;InvocationHandler&#xff09;&#xff1a;…
阅读更多...
springcloud alibaba整合sentinel并结合dashboard控制面板设置规则

springcloud alibaba整合sentinel并结合dashboard控制面板设置规则

目录 一、springcloud alibaba整合sentinel二、采用代码方式设置流控规则三、结合dashboard控制面板设置规则3.1、准备工作3.2、设置全局异常处理3.3、编写测试接口3.4、结合dashboard控制面板设置规则3.4.1、流控规则设置并测试——QPS3.4.2、流控规则设置并测试——线程数3.4…
阅读更多...
反编译有哪些优势

反编译有哪些优势

在现在这个信息化的时代&#xff0c;软件开发中的编程是关键步骤&#xff0c;了解编程的反编译同样至关重要。对于大多数人来说&#xff0c;编程和反编译似乎是两个相对比较陌生的概念&#xff0c;但是都在软件开发周期中起着至关重要的作用。尤其是反编译&#xff0c;它在多个…
阅读更多...
nginx访问路径匹配方法

nginx访问路径匹配方法

目录 一&#xff1a;匹配方法 二&#xff1a;location使用: 三&#xff1a;rewrite使用 一&#xff1a;匹配方法 location和rewrite是两个用于处理请求的重要模块&#xff0c;它们都可以根据请求的路径进行匹配和处理。 二&#xff1a;location使用: 1&#xff1a;简单匹配…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023