当前位置: 首页 > news >正文

Html5实用个人博客留言板模板源码

文章目录

  • 1.设计来源
    • 1.1 主界面
    • 1.2 认识我界面
    • 1.3 我的日记界面
    • 1.4 我的文章列表界面和文章内容界面
    • 1.5 我的留言板界面
  • 2.演示效果和结构及源码
    • 2.1 效果演示
    • 2.2 目录结构
    • 2.3 源代码
  • 源码下载

作者:xcLeigh
文章地址:https://blog.csdn.net/weixin_43151418/article/details/135400706


html5实现好看的个人博客模板,个人空间源码,个人主页源码,模板分为,首页、认识我,我的文章,我的模板,文章内容等页面,在此基础上可根据博客模板,扩展更多的功能,统一的风格,代码上手简单,代码独立,可以直接使用。也可直接预览效果。如有代码问题可以私信联系博主,帮忙解决。

1.设计来源

1.1 主界面

    主界面,分为上下两个板块(上边为固定头部导航,保持不变),下边又分为左右两个板块,左边博客博客内容;右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部,相关版权信息。这为模板界面,可以支持变更自己喜欢的风格,主题色调的调整,代码扩展方便,上手容易。
    注意:图片右边上箭头出现多个是截图问题,真是效果见下面视频演示。

在这里插入图片描述

1.2 认识我界面

    认识我界面,分为上中下三个板块(上边为固定头部导航,保持不变),中间为内容。页面底部,相关版权信息。这为模板界面,可以支持变更自己喜欢的风格,主题色调的调整,代码扩展方便,上手容易。
    注意:图片右边上箭头出现多个是截图问题,真是效果见下面视频演示。

在这里插入图片描述

1.3 我的日记界面

    我的日记界面,分为上中下三个板块(上边为固定头部导航,保持不变),中间为内容。页面底部,相关版权信息。这为模板界面,可以支持变更自己喜欢的风格,主题色调的调整,代码扩展方便,上手容易。
    注意:图片右边上箭头出现多个是截图问题,真是效果见下面视频演示。

在这里插入图片描述

1.4 我的文章列表界面和文章内容界面

    我的文章界面,分为上下两个板块(上边为固定头部导航,保持不变),下边又分为左右两个板块,左边博客博客内容;右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部,相关版权信息。这为模板界面,可以支持变更自己喜欢的风格,主题色调的调整,代码扩展方便,上手容易。
    注意:图片右边上箭头出现多个是截图问题,真是效果见下面视频演示。

在这里插入图片描述

文章列表界面效果

 
    我的文章内容界面,分为上下两个板块(上边为固定头部导航,保持不变),下边又分为左右两个板块,左边博客博客内容;右边是个人信息内容和相关推广展示。不同板块链接展示。页面底部,相关版权信息。这为模板界面,可以支持变更自己喜欢的风格,主题色调的调整,代码扩展方便,上手容易。
    注意:图片右边上箭头出现多个是截图问题,真是效果见下面视频演示。

在这里插入图片描述

文章内容界面效果

1.5 我的留言板界面

    认识我界面,分为上中下三个板块(上边为固定头部导航,保持不变),中间为内容。页面底部,相关版权信息。这为模板界面,可以支持变更自己喜欢的风格,主题色调的调整,代码扩展方便,上手容易。
    注意:图片右边上箭头出现多个是截图问题,真是效果见下面视频演示。

在这里插入图片描述

2.演示效果和结构及源码

2.1 效果演示

这里是完整的效果演示,源码是个人博客模板,内含博客所需基础框架,可在此代码基础上更加完善功能,支持扩展自己的风格,可以删减内容,打造属于自己的个人博客。

Html5实用个人博客我的留言簿模板源码

2.2 目录结构

在这里插入图片描述

2.3 源代码

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

<!DOCTYPE HTML>
<html>
<head>
<title>码上有你 - 一个专注源码生产的人的个人博客</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="keywords" content="个人博客">
<meta name="description" content="一个专注源码生产的个人博客。">
<LINK rel="Bookmark" href="favicon.ico" >
<LINK rel="Shortcut Icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.min.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/myselt.css" />
</head>
<body>
<header class="navbar-wrapper"><div class="navbar navbar-fixed-top"><div class="container cl"><a class="navbar-logo hidden-xs" href="index.html"><img class="logo" src="img/logo.png" alt="xcLeigh博客" /></a><a class="logo navbar-logo-m visible-xs" href="index.html">xcLeigh博客</a><a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:void(0);" onclick="showSide();">&#xe667;</a><nav class="nav navbar-nav nav-collapse w_menu" role="navigation"><ul class="cl"><li class="active"> <a href="index.html" data-hover="首页">首页</a> </li><li> <a href="about.html" data-hover="认识我">认识我</a> </li><li> <a href="note.html" data-hover="我的日记">我的日记</a> </li><li><a href="article.html" data-hover="我的文章">我的文章</a></li><li> <a href="board.html" data-hover="我的留言簿">我的留言簿</a> </li></ul></nav></div></div>
</header><footer class="footer mt-20"><div class="container-fluid" id="foot"><p>Copyright &copy; 2023 - 2028<br><a href="#" target="_blank">京ICP备2023号-1</a>  个人博客 xcLeigh <a href="https://blog.csdn.net/weixin_43151418/article/details/134682321" target="_blank">源码模板</a><br></p></div>
</footer>
<script type="text/javascript" src="plugin/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="plugin/layer/3.0/layer.js"></script>
<script type="text/javascript" src="plugin/h-ui/js/H-ui.min.js"></script></body>
</html>

源码下载

Html5实用个人博客留言板模板(源码) 点击下载
在这里插入图片描述

--------------- 业精于勤,荒于嬉 ---------------

请添加图片描述

--------------- 行成于思,毁于随 ---------------

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

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

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

     💘 为爱表白 为你那个TA,体验别致的浪漫惊喜

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


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


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


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

相关文章:

Html5实用个人博客留言板模板源码

文章目录 1.设计来源1.1 主界面1.2 认识我界面1.3 我的日记界面1.4 我的文章列表界面和文章内容界面1.5 我的留言板界面 2.演示效果和结构及源码2.1 效果演示2.2 目录结构2.3 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151…...

解码 Elasticsearch 查询 DSL:利用 Elasticsearch 中的 has_child 和 has_parent 查询进行父子文档搜索

今天&#xff0c;让我们深入研究 has_child 查询和 has_parent 查询&#xff0c;这将帮助我们将 2 个不同的文档组合到一个索引中&#xff0c;从而使我们能够将它们与关系关联起来。 这样做会对我们搜索相关文档时有很大帮助。 在使用 has_child 及 has_parent 这种关系时&…...

架构(1)

目录 1.如何理解架构的演进&#xff1f; 2.如何理解架构的服务化趋势&#xff1f; 3.架构中有哪些技术点&#xff1f; 4.谈谈架构中的缓存应用&#xff1f; 5.在开发中缓存具体如何实现&#xff1f; 1.如何理解架构的演进&#xff1f; 初始阶段的网站架构应用服务和数据服…...

第8课 将推流端与播放端合并为一对一音视频聊天功能

在第二章的第7课&#xff0c;我们实现了一个推流端&#xff0c;可以把音视频推送到rtmp服务器&#xff1b;在第一章的第4课&#xff0c;我们实现了一个播放器&#xff0c;可以正常播放rtmp音视频流。聪明的你应该可以想到了&#xff1a;把推流端和播放端合并在一起&#xff0c;…...

如何保障集团下达的政策要求有效落地

随着新一轮国企改革的推进&#xff0c;很多国有企业建立了集团化的管控体系。通过集团化经营管理的模式&#xff0c;帮助国有企业凝聚更强的竞争力&#xff0c;集团企业通过资源整合、反向投资、控股、参股等手法创造业务板块之间的协同、互补效应&#xff0c;从而实现战略联动…...

霍尔传感器测速测距实验——STM32驱动(课程设计)

———————实验效果——————— &#x1f384;图片演示测距 &#x1f384;视频演示测速 基于STM32单片机 霍尔传感器测速度&#xff0c;测圈数 &#x1f384;模块介绍 测距使用HC-SR04模块 测距使用测速使用霍尔传感器 ———————代码获取查看下方———————…...

数据库——SQL注入攻击

【实验内容及要求】 一、内容&#xff1a;掌握SQL注入攻击的原理&#xff0c;掌握基本SQL注入攻击的方法&#xff0c;掌握防SQL注入攻击的基本措施。 二、要求&#xff1a; 1. DVWA环境配置 DVWA&#xff08;Damn Vulnerable Web Application&#xff09;是一个用来进行安全…...

【已解决】js定义对象属性是.如何访问

当变量没有length属性的时候&#xff0c;可能是个对象变量&#xff0c;当有键值对的时候就可能是个对象&#xff0c;读者都知道的是&#xff0c;用typeof(变量)可以查看属性&#xff0c;今天本文解决的问题是如果js定义对象中属性是"点"如何访问 问题再现 var a {…...

Linux入门攻坚——11、Linux网络属性配置相关知识1

网络基础知识&#xff1a; 局域网&#xff1a;以太网&#xff0c;令牌环网&#xff0c; Ethernet&#xff1a;CSMA/CD 冲突域 广播域 MAC&#xff1a;Media Access Control&#xff0c;共48bit&#xff0c;前24bit需要机构分配&#xff0c;后24bit自己…...

51单片机定时/计数器相关知识点

51单片机定时/计数器相关知识点 结构组成 51单片机的定时/计数器中有两个寄存器&#xff1a; T0&#xff1a;低位&#xff1a;TL0&#xff08;字节地址8AH&#xff09;高位&#xff1a;TH0&#xff08;字节地址8CH&#xff09;T1&#xff1a;低位&#xff1a;TL1&#xff08…...

机器视觉兄弟们,没有项目订单,机器视觉项目行业难题来了

产品没一个正形&#xff0c;光源像是打了几十年的光棍一样&#xff0c;偏偏配不上&#xff0c;n次“相亲”之后图像硬是“阴晴圆缺”&#xff0c;老板阴阳怪气你这打不出来&#xff0c;给客户看之后说&#xff0c;这都打不出来&#xff0c;你们不行啊。 我听了后真想&#xff…...

机器人开发--动力系统

机器人开发--动力系统 1 介绍概述BMS电池管理芯片系电源管理细分赛道&#xff0c;主要产品形态包括电池计量&#xff08;电量计&#xff09;、电池安全、充电管理等三大类芯片BMS 产业链动力电源、消费电子细分领域 BMS 芯片种类、技术及下游销量概览 电池电池包典型产品及参数…...

51单片机四位数码管计算器 Proteus仿真程序

目录 概要 仿真图 部分代码 资料下载地址&#xff1a;51单片机四位数码管计算器 Proteus仿真程序 概要 1.系统通过4x4的矩阵键盘输入数字及运算符。 2.可以进行4位十进制数以内的加法运算&#xff0c;如果计算结果超过4位十进制数&#xff0c;则屏幕显示E 3.可以进行加法以外…...

问题 B: 分牌

题目描述 有 N 堆纸牌&#xff0c;编号分别为 1&#xff0c;2&#xff0c;…, N。每堆上有若干张&#xff0c;但纸牌总数必为 N 的倍数。可以在任一堆上取若干张纸牌&#xff0c;然后移动。 移牌规则为&#xff1a;在编号为 1 堆上取的纸牌&#xff0c;只能移到编号为 2 的堆上…...

3元一平方公里的在线卫星影像

我们为大家分享了免费下载卫星影像的方法。 但让人遗憾的是&#xff0c;该影像的最高分辨率只有10米&#xff0c;需要更高清且比较新的卫星影像&#xff0c;看来还是得付费购买才比较靠谱。 自助选择区县范围 商业卫星影像主要面向企事业单位&#xff0c;一般来讲都比较贵&a…...

只会用 xxl-job?更强大的新一代分布式任务调度框架来了!

前言 PowerJob是新一代分布式任务调度与计算框架&#xff0c;支持CRON、API、固定频率、固定延迟等调度策略&#xff0c;提供工作流来编排任务解决依赖关系&#xff0c;能让您轻松完成作业的调度与繁杂任务的分布式计算。 文章来源&#xff1a;https://blog.csdn.net/LY_624/…...

LeetCode-无重复字符的最长子串(3)

题目描述&#xff1a; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 代码&#xff1a; class Solution {public int lengthOfLongestSubstring(String s) {Set<Character> occnew HashSet<Character>();int lens.length();int…...

【C#】知识点实践序列之Lock简单解决并发引起数据重复问题

欢迎来到《小5讲堂之知识点实践序列》文章&#xff0c;大家好&#xff0c;我是全栈小5。 这是2024年第3篇文章&#xff0c;此篇文章是C#知识点实践序列文章&#xff0c;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 本篇在Lock锁定代码块基…...

NLP基础——TF-IDF

TF-IDF TF-IDF全称为“Term Frequency-Inverse Document Frequency”&#xff0c;是一种用于信息检索与文本挖掘的常用加权技术。该方法用于评估一个词语&#xff08;word&#xff09;对于一个文件集&#xff08;document&#xff09;或一个语料库中的其中一份文件的重要程度。…...

kubernetes(四)

文章目录 1. 持久化存储1.1 HostPath1.2 NFS1.3 PV和PVC 1. 持久化存储 1.1 HostPath hostpath&#xff1a;多个容器共享数据&#xff0c;不能跨宿主机&#xff0c;如果宿主机挂了&#xff0c;在其他宿主机上起pod&#xff0c;那么之前的数据就没有了 spec:nodeName: 10.0.0…...

Hack The Box注册失败?别慌,可能是你的‘上网姿势’不对(附最新可用方案)

Hack The Box注册问题排查与解决方案全指南 注册Hack The Box时遇到各种报错提示是许多技术爱好者共同的困扰。作为全球知名的网络安全实战平台&#xff0c;其注册流程确实存在一些技术门槛需要跨越。本文将系统性地分析注册失败的深层原因&#xff0c;并提供多种经过验证的解决…...

Python金融数据分析实战:从数据清洗到LLM智能问答机器人构建

1. 项目概述&#xff1a;一个金融数据分析与智能问答的实战项目 最近在整理一些数据分析的实战项目&#xff0c;正好翻到了之前为Forage BCGX GenAI项目做的一个金融分析案例。这个项目麻雀虽小&#xff0c;五脏俱全&#xff0c;它完整地走了一遍从原始数据清洗、指标计算、可视…...

基于Ansible Playbook的Kubernetes集群自动化部署实践

1. 项目概述&#xff1a;一个为Kubernetes集群部署而生的自动化剧本如果你和我一样&#xff0c;长期在运维和DevOps一线摸爬滚打&#xff0c;那么对Kubernetes集群的初始化部署一定又爱又恨。爱的是它带来的强大编排能力&#xff0c;恨的是那套繁琐、易错、文档分散的kubeadm i…...

uni-number-box深度解析:从基础属性到高级双向绑定实战

1. uni-number-box基础入门&#xff1a;从零开始玩转数字输入框 第一次接触uni-number-box时&#xff0c;我也觉得这不就是个简单的数字加减控件吗&#xff1f;直到在电商项目中真正用起来&#xff0c;才发现这个看似简单的组件藏着不少门道。uni-number-box是uni-app框架提供的…...

工业意识:03 组态软件怎么选?WinCC、FactoryTalk、国产一篇讲透

03 组态软件怎么选?WinCC、FactoryTalk、国产一篇讲透 前面咱们把SCADA聊成“千里眼”,MES聊成“透明玻璃房”,现在终于到最爽的部分——画面组态!简单说,就是用鼠标拖拖拽拽,在电脑上搭出那些监控大屏:仪表盘、按钮、趋势图、报警灯、3D管道……全连上PLC变量,点一下…...

告别手搓测试平台:用Synopsys SVT APB VIP快速搭建你的SoC验证环境(附完整配置流程)

告别手搓测试平台&#xff1a;用Synopsys SVT APB VIP快速搭建你的SoC验证环境&#xff08;附完整配置流程&#xff09; 在SoC验证领域&#xff0c;APB总线作为AMBA协议家族中最基础的外设连接标准&#xff0c;几乎出现在每一个现代芯片设计中。然而&#xff0c;许多验证工程师…...

点云成像三维焊缝识别与机器人跟踪【附代码】

✨ 长期致力于点云成像、焊缝识别定位、机器人、点云拼接、焊缝轨迹跟踪研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;基于圆柱体拟合与ICP拼接的点云…...

知网AI率30%50%80%哪个最难降?比话降AI知网专精方案!

知网AI率30%50%80%哪个最难降&#xff1f;比话降AI知网专精方案&#xff01; 很多硕博毕业生有个直觉&#xff1a;知网 AI 率 80% 比 30% 难降很多。这个直觉只对了一半。 真相是&#xff1a;难度不是看数字高低&#xff0c;是看「工具的技术路线对不对知网的算法」。一篇 80% …...

从波形到Mel谱图:机器学习音频特征提取的完整实践指南

1. 音频信号处理基础&#xff1a;从物理世界到数字信号 第一次接触音频信号处理时&#xff0c;我被那一串串看似随机的波形数据弄得一头雾水。直到后来才明白&#xff0c;这些数字背后其实对应着我们熟悉的物理现象——声音。声音的本质是空气压力的变化&#xff0c;就像水面泛…...

从find到ind2sub:Matlab数据筛选后操作的完整工作流(以R2023b为例)

从find到ind2sub&#xff1a;Matlab数据筛选后操作的完整工作流&#xff08;以R2023b为例&#xff09; 在数据分析与科学计算领域&#xff0c;Matlab作为一款强大的工具&#xff0c;其矩阵操作能力尤为突出。面对大型矩阵或高维数组时&#xff0c;如何高效地定位并处理特定条件…...