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

作者：代码探险家 | 2024-08-09 19:15:29

踩

博客源代码

文章目录

1.设计来源
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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

源码下载

html5实现好看的个人博客模板源码（源码）点击下载

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

请添加图片描述

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/954701