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(防止抄袭,原文地址不可删除)

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

30分钟快速搭建并部署一个免费的个人博客

前言 现如今网上有许多完善的博客平台&#xff0c;如博客园、掘金、思否、知乎等。有人会说为什么现在网上有这么多成熟的博客平台&#xff0c;你还要浪费时间搭建一个自己的博客系统呢&#xff1f;首先我相信每一个程序员都会想要拥有一个属于自己的博客系统&#xff0c;其次…

K8S陈述式管理

命令行&#xff1a;kubectl命令行工具 优点&#xff1a;90%以上的场景都可以满足 对资源的增&#xff0c;删&#xff0c;查比较方便&#xff0c;对改不是很友好 缺点&#xff1a; 命令比较冗长&#xff0c;复杂&#xff0c;难记 声明式&#xff1a; K8S当中的yaml文件来实…

MR实战:词频统计

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建词频统计映射器类5、创建词频统计归并…

【CMake】1. VSCode 开发环境安装与运行

CMake 示例工程代码 https://github.com/LABELNET/cmake-simple 插件 使用 VSCode 开发C项目&#xff0c;安装 CMake 插件 CMakeCMake ToolsCMake Language Support &#xff08;建议&#xff0c;语法提示) 1. 配置 CMake Language Support , Windows 配置 donet 环境 这…

遥感影像-语义分割数据集:山体滑坡数据集详细介绍及训练样本处理流程

原始数据集详情 简介&#xff1a;该遥感滑坡数据集由卫星光学图像、滑坡边界的形状文件和数字高程模型组成。该数据集中的所有图像&#xff0c;即770张滑坡图像&#xff08;红点&#xff09;和2003张非滑坡图像&#xff0c;都是从2018年5月至8月拍摄的TripleSat卫星图像中截取…

windows下使用PowerShell切割大数据文件

测试文件为24.4G文件 打开PowerShell窗口&#xff0c;使用以下命令 $filePath 为指向文件路径 $outputPath 输出到指定文件夹 $chunkSize 单个文件控制切割大小 将命令修改完后&#xff0c;直接粘贴到powershell窗口&#xff0c;点击回车即可进行切割 $filePath "D:\…

【力扣算法日记】无重复字符的最长子串

最近刷了很多算法题&#xff0c;这些解题过程也拓展了自己的思路&#xff0c;是个适合记录的素材。所以决定在继技术知识点详解的【一文系列】之后&#xff0c;开启新坑——【力扣算法系列】&#xff0c;来记录力扣刷题过程。 分享题目不确定&#xff0c;目前打算只分享我认为…

C# OpenCvSharp DNN FreeYOLO 人脸检测

目录 效果 模型信息 项目 代码 下载 C# OpenCvSharp DNN FreeYOLO 人脸检测 效果 模型信息 Inputs ------------------------- name&#xff1a;input tensor&#xff1a;Float[1, 3, 192, 320] --------------------------------------------------------------- Outp…

基于SSM的人事档案管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

C ++类

定义一个Person类&#xff0c;私有成员int age&#xff0c;string &name&#xff0c;定义一个Stu类&#xff0c;包含私有成员double *score&#xff0c;写出两个类的构造函数、析构函数、拷贝构造和拷贝赋值函数&#xff0c;完成对Person的运算符重载(算术运算符、条件运算…

canvas设置图形的阴影

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

微信小程序:flex布局实现换行

1、关键代码.wxml&#xff1a; <view class"pay margin-top-40"><view class"info"><view class"pay-info-title margin-left-22 flex-start"> 请选择充值金额</view><view class"flex-wrap margin-top-20&quo…