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

文章目录

  • 1.设计来源
    • [1.1 主界面](#1.1 主界面)
    • [1.2 认识我界面](#1.2 认识我界面)
    • [1.3 我的文章界面](#1.3 我的文章界面)
    • [1.4 我的模板界面](#1.4 我的模板界面)
    • [1.5 文章内容界面](#1.5 文章内容界面)
  • 2.结构和源码
    • [2.1 目录结构](#2.1 目录结构)
    • [2.2 源代码](#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(防止抄袭,原文地址不可删除)

相关推荐
小行星1251 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00111 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果26 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9629 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋31 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder32 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿3 小时前
【前端】CSS
前端·css