【博主推荐】HTML5实现简洁的实用的个人网站、个人主页七个页面源码

文章目录

  • 1.设计来源
    • 1.1 个人主页界面
    • 1.2 关于我界面
    • 1.3 我的技能界面
    • 1.4 我的经验界面
    • 1.5 我的教育界面
    • 1.6 我的项目界面
    • 1.7 联系我界面
  • 2.效果和源码
    • 2.1 动态效果
    • 2.2 源代码
  • 源码下载
  • 万套模板，程序开发，在线开发，在线沟通

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

HTML5实现简洁的实用的个人网站、个人主页七个页面源码，个人网站源码，个人主页源码，个人介绍源码，个人简历源码，内置七个页面有个人主页；关于我；我的技能；我的经验；我的教育；我的项目；联系我七个页面。包含各种页面标签，通用性强，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

1.1 个人主页界面

        个人主页界面效果图，头部底部色调统一，整体风格一致，图文结合的方式介绍自己，相关链接跳转，相关信息展示，图文结合的方式展现。具体动态效果见下面的视频演示。

主页菜单效果

在这里插入图片描述

主页完整效果

在这里插入图片描述

1.2 关于我界面

        关于我界面效果图，头部底部色调统一，整体风格一致，图文结合的方式介绍自己，相关链接跳转，相关信息展示，图文结合的方式展现。具体动态效果见下面的视频演示。

在这里插入图片描述

1.3 我的技能界面

        我的技能界面效果图，头部底部色调统一，整体风格一致，我的技能以文字描述自己的技能和图表方式演示熟练度，图文结合的方式描述自己的代码量，项目数等。具体动态效果见下面的视频演示。

在这里插入图片描述

1.4 我的经验界面

        我的经验界面效果图，头部底部色调统一，整体风格一致，我的经验是以列表的形式，展示自己的项目经验，带有鼠标经过放大效果。具体动态效果见下面的视频演示。

在这里插入图片描述

1.5 我的教育界面

        我的教育界面效果图，头部底部色调统一，整体风格一致，我的教育是以列表的形式，展示自己的教育经历，带有鼠标经过放大效果。具体动态效果见下面的视频演示。

在这里插入图片描述

1.6 我的项目界面

        我的项目界面效果图，头部底部色调统一，整体风格一致，我的项目内容是图文演示，支持点击图片放大，可以浏览，带鼠标悬浮效果。具体动态效果见下面的视频演示。

在这里插入图片描述

单击图片放大

在这里插入图片描述

1.7 联系我界面

        联系我界面效果图，头部底部色调统一，整体风格一致，联系我左侧是直接发消息的表单，右侧是相关联系方式展示。具体动态效果见下面的视频演示。

在这里插入图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的个人网站、个人主页。

HTML5实现简洁的实用的个人网站、个人主页七个页面源码

2.2 源代码

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>好看的个人网站</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="好看的个人网站" />
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">   
<link href="css/font-awesome.css" rel="stylesheet"> <!-- font-awesome icons --> 
<script src="js/jquery-2.2.3.min.js"></script>  
</head>
<body> <!-- banner --><div class="banner"><div class="banner-w3lsinfo"> <!-- header --><div class="header"><div class="container"><div class="logo"><h1><a href="index.html">刘亦菲</a></h1></div> <div class="menu"><a href="#" class="navicon"></a> <div class="toggle effect-3"> <ul class="toggle-menu"><li><a href="index.html" class="active"> 个人主页</a></li><li><a href="about.html"> 关于我</a></li>  <li><a href="skills.html"> 我的技能</a></li><li><a href="experience.html">我的经验</a></li> <li><a href="education.html">我的教育</a></li><li><a href="projects.html"> 我的项目</a></li>							<li><a href="contact.html"> 联系我</a></li></ul></div> </div>   <div class="social-w3licon"><a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="social-button twitter"><i class="fa fa-qq"></i></a><a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="social-button facebook"><i class="fa fa-weixin"></i></a> <a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="social-button google"><i class="fa fa-weibo"></i></a> <a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="social-button dribbble"><i class="fa fa-paw"></i></a> </div><div class="clearfix"> </div></div></div><!-- //header --> <!-- banner-text --><div class="banner-text"> <div class="container"> <div class="banner-w3lstext"> <h2>刘亦菲<span>我是一个软件工程师</span></h2><p>脚踏实地山让路，持之以恒海可移，相信自我，磨砺自我，充实自我</p></div> </div></div><!-- //banner-text --><div class="w3agile-address"> <div class="container"> <ul><li><i class="fa fa-map-marker" aria-hidden="true"></i>北京市、海淀区</li><li><i class="fa fa-phone" aria-hidden="true"> </i>  + 133 1100 1100</li><li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:test@126.com"> test@126.com</a></li></ul></div> </div> </div></div><div class="w3agile-footer"><div class="container"> <p>Copyright &copy; 2024.个人网站 All rights reserved. <a href="https://blog.csdn.net/weixin_43151418" target="_blank">xcLeigh</a> | <a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a></p></div></div><script src="js/bootstrap.js"></script>
</body>
</html>

源码下载

HTML5实现简洁的实用的个人网站、个人主页七个页面源码（源码） 点击下载
在这里插入图片描述

万套模板，程序开发，在线开发，在线沟通

  • 专业后端大佬在线沟通需求开发
  • 专业前端大佬在线沟通需求开发
  • 专业网站整套大佬在线沟通需求开发
  • 专业毕业设计大佬在线沟通需求开发
  • 专业大作业大佬在线沟通需求开发
  • 【优惠活动】专属定制，程序在线开发
--------------- 业精于勤，荒于嬉 ---------------

请添加图片描述

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

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

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

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

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

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

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

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

原文地址：https://blog.csdn.net/weixin_43151418/article/details/140610058（防止抄袭，原文地址不可删除）

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

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

相关文章

ipsec协议簇（详解）

ipsec协议簇（详解）

IPSEC协议簇 IPSEC协议簇 --- 基于网络层的&#xff0c;应用密码学的安全通信协议组 IPV6中&#xff0c;IPSEC是要求强制使用的&#xff0c;但是&#xff0c;IPV4中作为可选项使用 IPSEC可以提供的安全服务 机密性 --- 数据加密 完整性 --- 防篡改可用性 数据源鉴别 -- 身份…
阅读更多...
长效代理IP如何选用及代理服务分析

长效代理IP如何选用及代理服务分析

在这个数据为王、信息瞬息万变的时代&#xff0c;长效代理IP成为了众多开发者、数据科学家乃至普通网民手中的一把利器。它不仅能帮助我们解决地域管理&#xff0c;还能在保护隐私的同时&#xff0c;确保数据传输的稳定与安全。但面对市面上琳琅满目的代理服务&#xff0c;如何…
阅读更多...
IVI(In-Vehicle Infotainment,智能座舱的信息娱乐系统）

IVI(In-Vehicle Infotainment,智能座舱的信息娱乐系统）

IVI能够实现包括三维导航、实时路况、辅助驾驶等在线娱乐功能。 IVI人机交互形式&#xff08;三板斧&#xff09;&#xff1a;声音、图像、文字 IVI人机交互媒介I&#xff08;四件套&#xff09;&#xff1a;中控屏幕&#xff08;显示、触控&#xff09;、仪表显示、语言、方…
阅读更多...
目标检测 | YOLO v1、YOLO v2、YOLO v3与YOLO v3 SPP理论讲解

目标检测 | YOLO v1、YOLO v2、YOLO v3与YOLO v3 SPP理论讲解

☀️教程&#xff1a;霹雳吧啦Wz ☀️链接&#xff1a;https://www.bilibili.com/video/BV1yi4y1g7ro?p1&vd_sourcec7e390079ff3e10b79e23fb333bea49d 一、YOLO v1 针对于two-stage目标检测算法普遍存在的运算速度慢的缺点&#xff0c;YOLO创造性的提出了one-stage目标检测…
阅读更多...
2024-07-20 Unity插件 Odin Serializer2 —— 序列化教程

2024-07-20 Unity插件 Odin Serializer2 —— 序列化教程

文章目录 1 由根对象决定序列化2 实现 Odin 序列化器2.1 继承已有序列化类2.2 自定义序列化类 3 避免 Unity 无限深度警告4 指定序列化秘钥4.1 External String Reference Resolver4.2 External GUID Reference Resolver4.3 External Index Reference Resolver 4 功能与限制4.1…
阅读更多...
为什么我不建议用Excel做进销存系统？

为什么我不建议用Excel做进销存系统？

进销存管理系统是一个企业中非常关键的部分&#xff0c;它涉及商品的采购、销售和库存管理等复杂流程。虽然EXCEL作为一个办公软件&#xff0c;它的通用性和灵活性使其能够处理这类数据&#xff0c;但实际上&#xff0c;使用它来构建专业的进销存管理系统存在一些明显的局限性。…
阅读更多...
haproxy服务介绍

haproxy服务介绍

haproxy 搭建使用开启HAProxy的界面UI配置负载均衡配置web代理 HAProxy&#xff08;High Availability Proxy&#xff09;是一个高性能的TCP/HTTP负载均衡器和代理服务器&#xff0c;广泛用于提升Web应用的可用性和性能。[官网说明](https://docs.haproxy.org/2.8/intro.html#3…
阅读更多...
NLP： 词袋模型和TFIDF模型

NLP： 词袋模型和TFIDF模型

文章目录 词袋模型TF-IDF模型词汇表模型 词袋模型 文本特征提取有两个非常重要的模型&#xff1a; 词集模型&#xff1a;单词构成的集合&#xff0c;集合自然每个元素都只有一个&#xff0c;也即词集中的每个单词都只有一个。 词袋模型&#xff1a;在词集的基础上如果一个单词…
阅读更多...
autoxjs的安装与配置

autoxjs的安装与配置

AutoxJs 是一个基于 JavaScript 的自动化工具&#xff0c;用于在 Android 平台上创建自动化脚本。它是在原 Auto.js 项目的基础上继续维护和升级而来的。 AutoxJs 的优势主要包括以下几点&#xff1a; 无需 root 权限&#xff1a;可以在没有 root 权限的设备上运行大部分功能&…
阅读更多...
JavaWeb系列二十三: web 应用常用功能(文件上传下载)

JavaWeb系列二十三: web 应用常用功能(文件上传下载)

文件上传下载 基本介绍文件上传基本原理文件上传应用实例文件上传注意事项和细节 文件下载基本原理文件下载应用实例文件下载注意事项 ⬅️ 上一篇: JavaWeb系列二十二: 线程数据共享和安全(ThreadLocal) &#x1f389; 欢迎来到 JavaWeb系列二十三: web 应用常用功能(文件上传…
阅读更多...
创建最佳实践创建 XML 站点地图--SEO

创建最佳实践创建 XML 站点地图--SEO

您是否正在努力让您的网站被搜索引擎索引&#xff1f;您想提高您网站的搜索引擎知名度吗&#xff1f;如果是&#xff0c;您可能会错过 XML 站点地图的重要性。XML 站点地图在改善您网站的 SEO 方面发挥着至关重要的作用。‍ XML 站点地图是您网站结构的蓝图&#xff0c;可帮助…
阅读更多...
YOLOv5项目梳理

YOLOv5项目梳理

1 项目介绍 参考项目&#xff1a;YOLO项目 1.1训练模型 YOLOv5模型 train.py 训练预训练模型 ... ... def parse_opt(knownFalse):# 命令行参数解析器初始化parser argparse.ArgumentParser()# 初始权重路径&#xff0c;默认为 ROOT / yolov5s.pt&#xff0c;用于指定模…
阅读更多...
Navicat 17 for Mac 数据库管理软件

Navicat 17 for Mac 数据库管理软件

Mac分享吧 文章目录 效果一、准备工作二、开始安装1. 双击运行软件&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕。2. 应用程序/启动台显示Navicat图标&#xff0c;表示安装成功。 二、运行测试运行后提示&#xff1a;“Navicat Premium.pp”已损坏&#x…
阅读更多...
在qt的c++程序嵌入一个qml窗口

在qt的c++程序嵌入一个qml窗口

//拖拽一个QQuickWidget c端和qml通信的桥梁 找到qml的main.qml的路径 ui->quickWidget->setSource(QUrl::fromLocalFile("../../../code/main.qml"));// QML 与 Qt Widgets 通信//窗口就成了一个类实例对象pRoot (QObject*)ui->quickWidget->rootObje…
阅读更多...
redis面试基础知识

redis面试基础知识

redis的数据类型 Redis是一个key-value的数据库&#xff0c;key一般是String类型&#xff0c;不过value的类型多种多样&#xff1a; 五种基本数据类型 Redis 通用命令 通用指令是部分数据类型的&#xff0c;都可以使用的指令&#xff0c;常见的有&#xff1a; KEYS&#xff…
阅读更多...
思维（交互题），CF 1990E2 - Catch the Mole(Hard Version)

思维（交互题），CF 1990E2 - Catch the Mole(Hard Version)

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 E2 - Catch the Mole(Hard Version) 二、解题报告 1、思路分析 考虑每次误判都会让鼹鼠上升一层&#xff0c;相应的&#xff0c;最外层的一层结点都没用了 由于数据范围为5000&#xff0c;我们随便找个叶子…
阅读更多...
Electron案例解析-编写一个简单的electron程序

Electron案例解析-编写一个简单的electron程序

index.html <!DOCTYPE html> <html> <head><meta charset"UTF-8" /><!-- 内容安全策略--><metahttp-equiv"Content-Security-Policy"content"default-src self; script-src self"/><metahttp-equiv&quo…
阅读更多...
C语言-栈和队列

C语言-栈和队列

文章目录 &#x1f3af;引言&#x1f453;栈和队列1.栈1.1栈的概念与结构1.2栈的实现 2.队列2.1队列的概念与结构2.2队列的实现 &#x1f947;结语 &#x1f3af;引言 欢迎来到HanLop博客的C语言数据结构初阶系列。在之前的文章中&#xff0c;我们详细介绍了链表及其操作方法。…
阅读更多...
8年前端总结和感想（转）~

8年前端总结和感想（转）~

我是牛奶&#xff0c;本文是我前端工作 8 年的一些总结和感想 主要记录下个人点滴、前端知识点、场景应用、未来的憧憬以及个人规划&#xff0c;供自己以后查漏补缺&#xff0c;也欢迎同道朋友交流学习。 自我介绍 我是一名工作在非知名公司的 8 年前端&#xff0c;双非普通本…
阅读更多...
JMeter使用手册

JMeter使用手册

安装 下载地址 https://jmeter.apache.org/download_jmeter.cgi 下载后解压到win的文件夹中 打开JMeter的bin文件夹&#xff0c;双击这个jar就启动了JMeter 启动 出现这样的界面 基本使用 添加变量 这个变量在使用的时候可以被引用 创建线程组 所有的请求都得基于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023