html简洁风格的个人博客网站模板(源码)

news2024/12/30 1:45:52

文章目录

  • 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/128288153


html简洁风格的个人博客网站模板 html简洁风格的个人博客网站模板,里面包括首页面,列表页面,文章详细页面,资源页面,时间记录条页面等模板页面,可以借鉴这个模板,开发自己的博客,容易上手。下载后直接运行。

1.设计来源

1.1 博客首界面

博客首界面,以logo和菜单导航,为主导航,然后一个动态banner,跟着一个资源模板,内容分为左右,左边为文章,右边为天气,最新文章,底部为版号。

请添加图片描述

1.2 个人简介界面

个人简介界面,介绍个人的信息,相关爱好,个人特长等

请添加图片描述

1.3 日常记录界面

日常记录界面,根据时间记录自己的日记或者日常生活趣事。

请添加图片描述

1.4 文章列表界面

文章列表界面,以列表形式模板,可以自定义布局。

请添加图片描述

1.5 文章信息界面

文章详细信息,标题,内容,时间,作者,资源下载等,根据自己的需求变动。

请添加图片描述
更多内容见底部源码,点击下载,所有源码资源都在里面。

2.结构源码

2.1 目录结构

在这里插入图片描述

2.2 源代码

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

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>xcLeigh个人博客网站模板</title>
<meta name="keywords" content="个人博客,xcLiegh个人博客,个人博客模板,xcLiegh" />
<meta name="description" content="xcLiegh个人博客,提供个人学习源码平台。" />
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
</head>
<body>
<header>
  <div id="logo"><a href="/"></a></div>
  <nav class="topnav" id="topnav"><a href="index.html"><span>首页</span><span class="en">Protal</span></a><a href="about.html"><span>关于我</span><span class="en">About</span></a><a href="newlist.html"><span>慢生活</span><span class="en">Life</span></a><a href="moodlist.html"><span>日常生活</span><span class="en">Doing</span></a><a href="share.html"><span>模板分享</span><span class="en">Share</span></a><a href="knowledge.html"><span>学无止境</span><span class="en">Learn</span></a><a href="https://blog.csdn.net/weixin_43151418"><span>留言版</span><span class="en">Gustbook</span></a></nav>
  </nav>
</header>
<div class="banner">
  <section class="box">
    <ul class="texts">
      <p>打了死结的青春,捆死一颗苍白绝望的灵魂。</p>
      <p>为自己掘一个坟墓来葬心,红尘一梦,不再追寻。</p>
      <p>加了锁的青春,不会再因谁而推开心门。</p>
    </ul>
    <div class="avatar"><a href="#"><span>xcLiegh</span></a> </div>
  </section>
</div>
<div class="template">
  <div class="box">
    <h3>
      <p><span>个人博客</span>模板 Templates</p>
    </h3>
    <ul>
      <li><a href="/"  target="_blank"><img src="images/01.jpg"></a><span>仿新浪博客风格·梅——古典个人博客模板</span></li>
      <li><a href="/" target="_blank"><img src="images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
      <li><a href="/"  target="_blank"><img src="images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
      <li><a href="/" target="_blank"><img src="images/04.jpg"></a><span>女生清新个人博客网站模板</span></li>
      <li><a href="/"  target="_blank"><img src="images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
      <li><a href="/"  target="_blank"><img src="images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
    </ul>
  </div>
</div>
<article>
  <h2 class="title_tj">
    <p>文章<span>推荐</span></p>
  </h2>
  <div class="bloglist left">
    <h3>程序员请放下你的技术情节,与你的同伴一起进步</h3>
    <figure><img src="images/001.png"></figure>
    <ul>
      <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话, 那么我觉得技术人员要真正学会的第二课,不是技术,而是业务、交流与协作,学会关心其他工作伙伴的工作情况和进展...</p>
      <a title="/" href="/" target="_blank" class="readmore">阅读全文>></a>
    </ul>
    <p class="dateview"><span>2013-11-04</span><span>作者:xcLiegh</span><span>个人博客:[<a href="/news/life/">程序人生</a>]</span></p>
    <h3>程序员请放下你的技术情节,与你的同伴一起进步</h3>
    <figure><img src="images/001.png"></figure>
    <ul>
      <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话, 那么我觉得技术人员要真正学会的第二课,不是技术,而是业务、交流与协作,学会关心其他工作伙伴的工作情况和进展...</p>
      <a title="/" href="/" target="_blank" class="readmore">阅读全文>></a>
    </ul>
    <p class="dateview"><span>2013-11-04</span><span>作者:xcLiegh</span><span>个人博客:[<a href="/news/life/">程序人生</a>]</span></p>
    <h3>程序员请放下你的技术情节,与你的同伴一起进步</h3>
    <figure><img src="images/001.png"></figure>
    <ul>
      <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话, 那么我觉得技术人员要真正学会的第二课,不是技术,而是业务、交流与协作,学会关心其他工作伙伴的工作情况和进展...</p>
      <a title="/" href="/" target="_blank" class="readmore">阅读全文>></a>
    </ul>
    <p class="dateview"><span>2013-11-04</span><span>作者:xcLiegh</span><span>个人博客:[<a href="/news/life/">程序人生</a>]</span></p>
    <h3>程序员请放下你的技术情节,与你的同伴一起进步</h3>
    <figure><img src="images/001.png"></figure>
    <ul>
      <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话, 那么我觉得技术人员要真正学会的第二课,不是技术,而是业务、交流与协作,学会关心其他工作伙伴的工作情况和进展...</p>
      <a title="/" href="/" target="_blank" class="readmore">阅读全文>></a>
    </ul>
    <p class="dateview"><span>2013-11-04</span><span>作者:xcLiegh</span><span>个人博客:[<a href="/news/life/">程序人生</a>]</span></p>
    <h3>程序员请放下你的技术情节,与你的同伴一起进步</h3>
    <figure><img src="images/001.png"></figure>
    <ul>
      <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话, 那么我觉得技术人员要真正学会的第二课,不是技术,而是业务、交流与协作,学会关心其他工作伙伴的工作情况和进展...</p>
      <a title="/" href="/" target="_blank" class="readmore">阅读全文>></a>
    </ul>
    <p class="dateview"><span>2013-11-04</span><span>作者:xcLiegh</span><span>个人博客:[<a href="/news/life/">程序人生</a>]</span></p>
  </div>
  <aside class="right">
    <div class="weather"><iframe width="250" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=1"></iframe></div>
    <div class="news">
    <h3>
      <p>最新<span>文章</span></p>
    </h3>
    <ul class="rank">
      <li><a href="/" title="Column 三栏布局 个人网站模板" target="_blank">Column 三栏布局 个人网站模板</a></li>
      <li><a href="/" title="with love for you 个人网站模板" target="_blank">with love for you 个人网站模板</a></li>
      <li><a href="/" title="免费收录网站搜索引擎登录口大全" target="_blank">免费收录网站搜索引擎登录口大全</a></li>
      <li><a href="/" title="做网站到底需要什么?" target="_blank">做网站到底需要什么?</a></li>
      <li><a href="/" title="企业做网站具体流程步骤" target="_blank">企业做网站具体流程步骤</a></li>
      <li><a href="/" title="建站流程篇——教你如何快速学会做网站" target="_blank">建站流程篇——教你如何快速学会做网站</a></li>
      <li><a href="/" title="box-shadow 阴影右下脚折边效果" target="_blank">box-shadow 阴影右下脚折边效果</a></li>
      <li><a href="/" title="打雷时室内、户外应该需要注意什么" target="_blank">打雷时室内、户外应该需要注意什么</a></li>
    </ul>
    <h3 class="ph">
      <p>点击<span>排行</span></p>
    </h3>
    <ul class="paih">
      <li><a href="/" title="Column 三栏布局 个人网站模板" target="_blank">Column 三栏布局 个人网站模板</a></li>
      <li><a href="/" title="withlove for you 个人网站模板" target="_blank">with love for you 个人网站模板</a></li>
      <li><a href="/" title="免费收录网站搜索引擎登录口大全" target="_blank">免费收录网站搜索引擎登录口大全</a></li>
      <li><a href="/" title="做网站到底需要什么?" target="_blank">做网站到底需要什么?</a></li>
      <li><a href="/" title="企业做网站具体流程步骤" target="_blank">企业做网站具体流程步骤</a></li>
    </ul>
    <h3 class="links">
      <p>友情<span>链接</span></p>
    </h3>
    <ul class="website">
      <li><a href="https://blog.csdn.net/weixin_43151418">个人博客</a></li>
      <li><a href="https://blog.csdn.net/weixin_43151418">xcLeigh</a></li>
      <li><a href="https://blog.csdn.net/weixin_43151418">CSDN</a></li>
      <li><a href="https://blog.csdn.net/weixin_43151418">稀土掘金</a></li>
    </ul> 
    </div>  
    <!-- Baidu Button BEGIN -->
    <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"><a class="bds_tsina"></a><a class="bds_qzone"></a><a class="bds_tqq"></a><a class="bds_renren"></a><span class="bds_more"></span><a class="shareCount"></a></div>
    <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6574585" ></script> 
    <script type="text/javascript" id="bdshell_js"></script> 
    <script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script> 
    <!-- Baidu Button END -->   
    <a href="/" class="weixin"> </a></aside>
</article>
<footer>
  <p>Design by xcLeigh<a href="https://blog.csdn.net/weixin_43151418" target="_blank">京ICP备31301373号-2</a> <a href="/">网站统计</a></p>
</footer>
<script src="js/silder.js"></script>
</body>
</html>



源码下载

html简洁风格的个人博客网站模板(源码) 点击下载

在这里插入图片描述


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

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

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

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


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


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


原文地址:https://blog.csdn.net/weixin_43151418/article/details/128288153(防止抄袭,原文地址不可删除)

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

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

相关文章

qtday1:2、重新手动实现对象树模型

代码段加注释 #include <iostream> #include<list> using namespace std; class A { public:list<A *> child; //创建一个链表 public:A(A *parent nullptr){if(parent !nullptr) //说明有父组件{parent->child.push_back(this); //有父组件就将该…

数商云SRM供应商系统询比价采购业务流程介绍,重塑汽修企业核心竞争力

众所周知&#xff0c;采购供应是关系企业经营效益的重要工作。在汽修行业&#xff0c;由于汽车配件的车型规格繁多&#xff0c;技术业务性强&#xff0c;各种类商品采购过程的艰难性、销售状况的复杂性等等&#xff0c;汽配采购往往容易陷入种种困境&#xff0c;极大降低汽修企…

Qt-Web混合开发-QWebEngineView加载网页最小示例(1)

Qt-Web混合开发-QWebEngineView加载网页最小示例&#x1f4a5; 文章目录Qt-Web混合开发-QWebEngineView加载网页最小示例&#x1f4a5;1、概述&#x1f4af;2、实现效果&#x1f4a6;3、实现功能&#x1f4ac;4、关键代码&#x1f4a4;5、源代码&#x1f648;更多精彩内容&…

【20天快速掌握Python】day01-Python入门

1、什么是Python&#xff1f; Python是一门解释型的编程语言&#xff0c;而且是现在世界上最流行的编程语言之一。 2、Python优缺点 优点 简单&#xff1a;Python是一种代表简单主义思想的语言。阅读一个良好的Python程序就感觉像是在读英语一样&#xff0c;尽管这个英语的要…

driftingblues靶机(0ok编码)

环境准备 靶机链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;oylc 虚拟机网络链接模式&#xff1a;桥接模式 攻击机系统&#xff1a;kali linux 2021.1 信息收集 1.探测目标靶机ip arp-scan -l 2.探测目标靶机开放端口和服务情况 nmap -A -sV -p- 192.168.…

SpringCloud之微服务环境搭建

目录 1、微服务介绍 1.1.微服务架构介绍 1.2.微服务架构的常见问题 1.3.微服务架构的常见解决方案 1.3.1.ServiceComb ​ 1.3.2.SpringCloud 1.3.3.SpringCloud Alibaba 2、微服务环境搭建 2.1案例准备 技术选项&#xff1a; 模块设计&#xff1a; …

pyqt5打包后的exe文件在网吧windoes7系统运行报错问题

方案一 用录屏软件录个视频&#xff0c;然后用播放软件打开逐帧查看&#xff0c;找到报错原因&#xff0c;一般是某个包导入错误&#xff0c;重新安装下对应的包。(忒麻烦) 方案二 生成的exe文件你们执行的话&#xff0c;cmd黑框肯定会一闪而过&#xff0c;但是没有关系&…

[附源码]Nodejs计算机毕业设计基于Java的在线点餐系统Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分…

使用 VADER 对股票新闻进行情绪分析

什么是情感分析&#xff1f; 提示&#xff1a;情感分析 定义&#xff1a; 情感分析或意见挖掘是自然语言处理 (NLP)的一个子领域&#xff0c;它试图在给定文本中识别和提取意见。情感分析的目的是根据文本中主观性的计算处理来衡量说话者/作者的态度、情绪、评价、态度和情绪…

WIN10 共享文件夹并取消密码访问

目录 一、前言 二、共享文件过程 1、选择需要共享的文件夹右键-授予访问权限-特定用户 2、选择共享用户Everyone并点击添加 3、再点击右下角共享&#xff0c;一个共享目录就生成了 4、但是别人访问还需要提供密码&#xff0c;非常不方便&#xff0c;此时需要关闭密码 一、…

DataHub Docker安装 PostreSQL元数据集成

install docker & docker-compose&#xff0c;包括docker-compose升级 curl -L https://github.com/docker/compose/releases/download/v2.14.0/docker-compose-uname -s-uname -m-o /usr/local/bin/docker-compose install jq wget http://dl.fedoraproject.org/pub/epel…

前端大文件上传及切片上传-提升上传效率

一、使用场景&#xff1a; 1.大文件上传 2.网络环境环境不好&#xff0c;存在需要重传风险的场景 二、名词解释&#xff1a; 切片上传&#xff1a;也叫分片上传&#xff0c;就是将所要上传的文件&#xff0c;按照一定的大小&#xff0c;将整个文件分隔成多个数据块来进行分…

【Docker】Docker如何构建自己的镜像?从镜像构建到推送远程镜像仓库图文教程

专栏往期文章 《Docker是什么&#xff1f;Docker从介绍到Linux安装图文详细教程》《30条Docker常用命令图文举例总结》 本期目录专栏往期文章1. 构建镜像2. 本地镜像发布到公有云3. 本地镜像发布到私有云1. 构建镜像 提交构建镜像的命令如下&#xff1a; $ docker commit -m…

大二学生《web课程设计》中华英雄人物介绍袁隆平HTML+CSS+JavaScript(期末考核大作业)

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

2021年网络安全省赛--服务器内部信息获取解析(中职组)

2021年省赛服务器内部信息获取解析 任务环境说明:Linux20210510 服务器场景操作系统:未知 (关闭连接) 服务器场景操作系统:Linux(封闭靶机) 用户名:test密码:123456 1.收集服务器场景中的服务信息。并获取服务器中开放的端口号信息,将服务器端口号作为flag提交…

GCN解读并附数据处理代码

此文GCN不是之前提到的lightGCN&#xff0c;而是真正的GCN图卷积&#xff0c;这个问题源于paper分类&#xff0c;同样是GAT所用的数据&#xff0c;其中paper之前的引用关系构成了图的边信息&#xff0c;之所以称之为半监督,并不是因为部分paper没有label及embedding信息&#x…

Nacos--命名空间、分组、ID的概念及用法

原文网址&#xff1a;Nacos--命名空间、分组、ID的概念及用法_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Nacos的命名空间、分组、ID的概念及用法。 Nacos通过命名空间&#xff08;Namespace&#xff09;分组&#xff08;Group&#xff09;应用&#xff08;Data ID或Name&#…

在Maix duino开发板上实现LED闪烁

文章目录简单介绍编程实现效果展示后简单介绍 如果你还不知道如何点亮LED&#xff0c;请看&#xff1a;点亮LED 今天开始上手在开发板上运行程序了&#xff0c;学习点亮LED灯就像是学习编程语言的Hello,worldHello, worldHello,world。学会电亮一盏LED灯之后&#xff0c;我便…

深度学习中计算量和参数量介绍、实现代码、例子

计算量 参数量 模型内存前言1 计算量和参数量2 统计计算量、参数量和模型内存3 源码分享3.1 thop实现3.2 ptflops实现pytorch_model_summary实现各层参数量统计4 总结前言 理清FLOPS和FLOPs&#xff0c;大写S代表的是显卡的运算性能&#xff0c;小写s代表的是模型的运算次数&a…

异构混排在vivo互联网的技术实践

作者&#xff1a;vivo 互联网算法团队- Shen Jiyi 本文根据沈技毅老师在“2022 vivo开发者大会"现场演讲内容整理而成。 混排层负责将多个异构队列的结果如广告、游戏、自然量等进行融合&#xff0c;需要在上下游和业务多重限制下取得最优解&#xff0c;相对复杂和难以控制…