html实现好看的个人介绍，个人主页模板3(附源码)
文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 关于我界面
- 1.3 教育成就界面
- 1.4 项目演示界面
- 1.5 联系我界面
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 2.2 源代码目录
- 源码下载
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/131263195
html实现好看的个人介绍，个人主页模板3(附源码)，第三种风格，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。
代码备注详细，可在此基础上更加完善功能，打造属于自己的个人介绍主页。
1.设计来源
上一篇个人简介： html实现好看的个人介绍，个人主页模板2(附源码) 的第三种风格版，总共有五个版本，五种风格。
1.1 主界面
主界面，以名称，职称，图片展示个人主信息，这里以偶像杨洋示例，具体相关信息可以自己配置。动态加载职称，具体动态效果见下面视频介绍。兼容PC端，手机端。
1.2 关于我界面
关于我界面，以我的基本信息和关于我的文字描述，加上成长路程。
1.3 教育成就界面
教育成就界面，展示教育和培训相关信息，并展示自己的工作经历。
1.4 项目演示界面
项目演示界面，以做过的项目组成，用图片描述。
1.5 联系我界面
联系我界面，以留言发送的方式和其他联系方式构成。
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的个人主页，可以删减内容，打造属于自己的个人介绍主页。
html实现好看的个人介绍，个人主页模板3(附源码)
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title>杨洋 - 个人简历</title><meta content="xcLeigh" name="description"><meta content="xcLeigh" name="keywords"><link href="img/favicon.png" rel="icon"><link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"><link href="vendor/swiper/swiper-bundle.min.css" rel="stylesheet"><link rel="stylesheet" href="font-awesome/4.6.1/css/font-awesome.min.css"><link href="css/style.css" rel="stylesheet">
</head>
<body><i class="bi bi-list mobile-nav-toggle d-xl-none"></i><header id="header"><div class="d-flex flex-column"><div class="profile"><img src="img/profile-img.jpg" alt="" class="img-fluid rounded-circle"><h1 class="text-light"><a href="index.html">杨 洋</a></h1><div class="social-links mt-3 text-center"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank" class="fa fb"><i class="fa fa-fw fa-weixin"></i></a><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank" class="fa fb"><i class="fa fa-fw fa-qq"></i></a><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank" class="fa fb"><i class="fa fa-fw fa-weibo"></i></a><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank" class="fa fb"><i class="fa fa-fw fa-chain"></i></a><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank" class="fa fb"><i class="fa fa-fw fa-github-alt"></i></a></div></div><nav id="navbar" class="nav-menu navbar"><ul><li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>主页</span></a></li><li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>关于我</span></a></li><li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>教育成就</span></a></li><li><a href="#services" class="nav-link scrollto"><i class="bx bx-server"></i> <span>项目演示</span></a></li><li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>联系我</span></a></li></ul></nav></div></header><section id="hero" class="d-flex flex-column justify-content-center align-items-center"><div class="hero-container" data-aos="fade-in"><h1>杨 洋</h1><p>我是一个 <span class="typed" data-typed-items=" 软件工程师 , 技术贴专家 , 源码分享家 "></span></p></div></section><main id="main"><section id="about" class="about"><div class="container"><div class="section-title"><h2>关于我</h2><p> 杨洋，1991年9月9日出生于上海市，籍贯安徽省合肥市，中国内地影视男演员，毕业于中国人民解放军国防大学军事文化学院2003级舞蹈系。</p></div><div class="row"><div class="col-lg-4" data-aos="fade-right"><img src="img/profile-img.jpg" class="img-fluid" alt=""></div><div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left"><h3>个人信息</h3><p class="fst-italic"> 2019年，主演的青春热血励志剧《全职高手》播出 [13] 。2020年，主演的国际反恐题材动作片《急先锋》上映 [14] 。2021年，主演的都市爱情剧《你是我的荣耀》播出 [168] 。2022年，主演的军旅剧《特战荣耀》和古装武侠言情剧《且试天下》相继播出。</p><div class="row"><div class="col-lg-6"><ul><li><i class="bi bi-chevron-right"></i> <strong>姓 名:</strong> <span>杨洋</span></li><li><i class="bi bi-chevron-right"></i> <strong>生 日:</strong> <span>1991年9月9日</span></li><li><i class="bi bi-chevron-right"></i> <strong>国 籍:</strong> <span>中国</span></li><li><i class="bi bi-chevron-right"></i> <strong>民 族:</strong> <span>汉族</span></li><li><i class="bi bi-chevron-right"></i> <strong>血 型:</strong> <span>AB型</span></li></ul></div><div class="col-lg-6"><ul><li><i class="bi bi-chevron-right"></i> <strong>身 高:</strong> <span>180 cm</span></li><li><i class="bi bi-chevron-right"></i> <strong>职 业:</strong> <span>演员</span></li><li><i class="bi bi-chevron-right"></i> <strong>籍 贯:</strong> <span>安徽省合肥市</span></li><li><i class="bi bi-chevron-right"></i> <strong>电 话:</strong> <span>××××××××××</span></li><li><i class="bi bi-chevron-right"></i> <strong>星 座:</strong> <span>处女座</span></li></ul></div></div></div></div></div></section></main><a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a><script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script><script src="js/main.js"></script>
</body></html>
2.2 源代码目录
源码下载
html实现好看的个人介绍，个人主页模板3（源码） 点击下载
💞 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/131263195（防止抄袭，原文地址不可删除）
相关文章：
html实现好看的个人介绍，个人主页模板3(附源码)
文章目录 1.设计来源1.1 主界面1.2 关于我界面1.3 教育成就界面1.4 项目演示界面1.5 联系我界面 2.效果和源码2.1 动态效果2.2 源代码2.2 源代码目录 源码下载 作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/131263195 …...
某大厂工作3年，被劣驱良了。。。
最近在知乎上看到一个问题：编程界的劣驱良现象有哪些？ 要想回答这个问题，首先要定义清楚，什么是「劣」什么是「良」？ 如果你认为编程技术牛x就是「良」，编程技术差就是「劣」，那可以清楚的回答…...
爱奇艺大数据加速：从Hive到Spark SQL
01 导语 爱奇艺自2012年开展大数据业务以来，基于大数据开源生态服务建设了一系列平台，涵盖了数据采集、数据处理、数据分析、数据应用等整个大数据流程，为公司的运营决策和各种数据智能业务提供了强有力的支持。随着数据规模的不断增长和计算…...
c++构造函数的多个细节拷问
提问1 能在 构造函数里面调用 虚函数吗？ 调用的 是这个类自己的 虚函数吗？ 这个问题 等价于 虚函数表什么时候形成的？ 回答1 答：在构造函数里面 可以调用虚函数哈 不过是父类的 子类对象还没有创建完成 所以 尽量不要在 构造里…...
Redis入门 - Lua脚本
原文首更地址，阅读效果更佳！ Redis入门 - Lua脚本 | CoderMast编程桅杆https://www.codermast.com/database/redis/redis-scription.html Redis 脚本使用 Lua 解释器来执行脚本。 Redis 2.6 版本通过内嵌支持 Lua 环境。执行脚本的常用命令为 EVAL。 …...
Creating Serial Numbers (C#)
此示例展示如何使用Visual C#编写的Add-ins为文件数据卡生成序列号。 注意事项： SOLIDWORKS PDM Professional无法强制重新加载用.NET编写的Add-ins，必须重新启动所有客户端计算机，以确保使用Add-ins的最新版本。 SOLIDWORKS PDM Professio…...
pycharm使用之torch_geometric安装
正式安装之前要先查看一下torch的版本 一、查看torch版本 1、winR ，输入cmd 2、输入python 3、 输入import torch，然后输入torch.__version__，最后回车 可以看到我的torch版本是1.10.0 二、下载合适的版本 1、打开链接 https://pytorch-…...
spring-mvc 工作流程
一、概述 spring-mvc 主要是DispatcherServlet工作流程流程可以分为两块，第一块为DispatcherServlet的加载，第二块为请求处理 二、DispatcherServlet的加载 主要依靠三个对象 DispatcherServletRegistrationBean：实现了ServletContextInit…...
物联网Lora模块从入门到精通(六)OLED显示屏
一、前言 获取到数据后我们常需要在OLED显示屏上显示，本文中我们需要使用上一篇文章(光照与温湿度数据获取)的代码，在其基础上继续完成本文内容。 基础代码： #include <string.h> #include "board.h" #include "hal_ke…...
平面坐标变换（单应性变换/Homography变换）
单应性(homography)变换用来描述物体在两个平面之间的转换关系，可以用于描述平移、翻转、缩放、旋转、仿射变换等。其是对应齐次坐标下的线性变换，可以通过矩阵表示： 其中，H为单应性变换矩阵，假设变换前坐标为(x,y)&am…...
大数据项目常识
大数据项目 随着社会的进步，大数据的高需求，高薪资，高待遇，促使很多人都来学习和转行到大数据这个行业。学习大数据是为了什么？成为一名大数据高级工程师。而大数据工程师能得到高薪、高待遇的能力在哪？自…...
Linux系统：常用服务端口
目录 一、理论 1.端口分类 2.传输协议 3.常用端口 一、理论 1.端口分类 一个计算机最多有65535个端口，端口不能重复。Linux 只有 root 用户可以使用1024以下的端口。 表1 端口分类 端口范围说明公认端口（Well-KnownPorts）0 - 1023这类…...
前端和后端分别是什么？
从技术工具来看： 前端：常见的 html5、JavaScript、jQuery... 后端：spring、tomcet、JVM，MySQL... 毕竟，如果这个问题问一个老后端，他掰掰手指可以给你罗列出一堆的名词来，比如设计模式、数据库…...
Spring基础知识（一）
目录 1.Spring Framework 2.Spring Framework优点 3.Spring Framework的功能模块 4.Spring配置文件 5.Spring应用配置步骤 6.Spring的IoC是什么 7.IoC的理念 8.IoC体系的好处 9.Spring中的 IoC 容器 10.依赖注入的方式 1.Spring Framework Spring Framework即Spring框…...
易语言使用node编译的js文件
环境配置 npm install -g cnpm babel-preset-env babel-cli babel-polyfill browserifynpm install -g crypto-js nodejs转js 例如加密模块 browserify -r babel-polyfill -r crypto-js -o es6.txt browserify file.js -o es6.txt易语言 使用v8 推荐 直接生成导入js即…...
计算机网络笔记：动态主机配置协议（DHCP）
协议配置： 为了把协议软件做成通用和便于移植的，协议软件的编写者不会把所有的细节都固定在源代码中，相反，他们把协议软件参数化，这就使得在很多台计算机上有可能使用同一个经过编译的二进制代码。一台计算机和另一台…...
新买的电脑怎么用U盘重装系统？新买的电脑用U盘重装系统教程
新买的电脑怎么用U盘重装系统？用户新买了电脑，想知道怎么用U盘来重装新买的电脑，用U盘来重装电脑其实非常简单，用户需要准备一个U盘，然后完成U盘启动盘的安装，接着按照以下分享的新买的电脑用U盘重装系统教…...
图像边缘检测原理
文章目录 图像边缘检测原理1:2:3:基本边缘检测算子 图像边缘检测原理 1: 图像的边缘指的是图像中像素灰度值突然发生变化的区域，如果将图像的每一行像素和每一列像素都描述成一个关于灰度值的函数，那么图像的边缘对应在灰度值函数中是函数值突然变大的…...
爬虫利器 Beautiful Soup 之遍历文档
Beautiful Soup 简介 Beautiful Soup 是一个可以从 HTML 或 XML 文件中提取数据的 Python 库，它提供了一些简单的操作方式来帮助你处理文档导航，查找，修改文档等繁琐的工作。因为使用简单，所以 Beautiful Soup 会帮你节省不少的工…...
12、Nginx高级之高级模块(secure_link/secure_link_md5)
一、功能 防盗链； ngx_http_secure_link_module模块用于检查所请求链接的真实性，保护资源免受未经授权的访问，并限制链接寿命。 该模块提供两种可选的操作模式。 第一种模式由 secure_link_secret 指令启用，用于检查所请求链接的真…...
【python】数据可视化，使用pandas.merge()对dataframe和geopandas类型数据进行数据对齐
目录 0.环境 1.适用场景 2.pandas.merge()函数详细介绍 3.名词解释“数据对齐”（来自chatGPT3.5） 4.本文将给出两种数据对齐的例子 1）dataframe类型数据和dataframe类型数据对齐（对齐NAME列）； 数据对…...
大模型入门（三）—— 大模型的训练方法
参考hugging face的文档介绍：https://huggingface.co/docs/transformers/perf_train_gpu_many#naive-model-parallelism-vertical-and-pipeline-parallelism，以下介绍聚焦在pytorch的实现上。 随着现在的模型越来越大，训练数据越来越多时&…...
人机交互学习-4 交互设计过程
交互设计过程 交互设计过程基本活动关键特征 设计过程中的问题如何选取用户？如何明确需求？如何提出候选方案？如何在候选方案中选择？ 交互设计生命周期模型星型生命周期模型可用性工程生命周期模型 交互设计过程管理界面设计的4个支…...
大话Stable-Diffusion-Webui之kohya-ss主题更改
文章目录 kohya-sskohya-ss主题更改添加背景图片更改组件样式自定义主题规范更改主题的另一种方式kohya-ss kohya-ss是一个专门用于训练Dreambooth、LoRA等小模型的项目，本身没有GUI界面，需要通过python命令去调用使用，这对于不懂python的同学来说门槛稍微有点高，于是有人…...
搜索在计算机中的地位十分重要
无论是在内部系统还是在外部的互联网站上，都少不了检索系统。数据是为了用户而服务。计算机在采集数据，处理数据，存储数据之后，各种客户端的操作pc机或者是移动嵌入式设备都可以很好的获取数据，得到 想要的数据服务。 …...
多模态深度学习：定义、示例、应用
人类使用五种感官来体验和解读周围的世界。我们的五种感官从五个不同的来源和五种不同的方式捕捉信息。模态是指某事发生、经历或捕捉的方式。 人脑由可以同时处理多种模式的神经网络组成。想象一下进行对话——您大脑的神经网络处理多模式输入（音频、视觉、文本、…...
基于ZCU106平台部署Vitis AI 1.2/2.5开发套件【Vivado+Vitis+Petalinux2020/2022】
Vitis AI是 Xilinx 的开发平台，适用于在 Xilinx 硬件平台（包括边缘设备和 Alveo 卡）上进行人工智能算法推理部署。它由优化的IP、工具、库、模型和示例设计组成。Vitis AI以高效易用为设计理念，可在 Xilinx FPGA 和 ACAP 上充分发…...
ChatGPT原理简介
承接上文GPT前2代版本简介 GPT3的基本思想 GPT2没有引起多大轰动，真正改变NLP格局的是第三代版本。 GPT3训练的数据包罗万象，上通天文下知地理，所以它会胡说八道,会说的贼离谱，比如让你穿越到唐代跟李白对诗，不在一…...
从0搭建Hyperledger Fabric2.5环境
Hyperledger Fabric 2.5环境搭建 一.Linux环境准备 # root登录 yum -y install git curl docker docker-compose tree yum -y install autoconf autotools-dev automake m4 perl yum -y install libtool autoreconf -ivf # 安装jq相关包 cd /opt git clone --recursive https…...
Rust每日一练(Leetday0026) 最小覆盖子串、组合、子集
目录 76. 最小覆盖子串 Minimum Window Substring 🌟🌟🌟 77. 组合 Combinations 🌟🌟 78. 子集 Subsets 🌟🌟 🌟 每日一练刷题专栏 🌟 Rust每日一练 专栏 Gola…...
哪家网站建设公司靠谱/手机百度正式版
今天在看王爽的《汇编语言》，看到地址总线的时候，由于那个图画的是并行传输，于是我就去搜了下地址总线是不是并行总线，结果看到一篇文章说现在串行总线的传输速度比并行总线要快，我就奇怪了。 在我的印象中，…...
邯郸市永年区做网站的公司/潍坊seo网络推广
蓝色关注，回复“6”获取技术、产品人必读10本书见字如面，我是军哥。马上金三银四，这文章你需要，拿到好 offer 记得来感谢军哥哈！你是不是，谈薪的时候总谈不过 HR？你是不是，明明不想接…...
具有设计感的网站/湘潭网页设计
前段时间和一个朋友聊天，酒席间向我抱怨他那段时间的郁闷:项目经理从客户那里拿来一个需求，实际上就是一个ppt描述，我这个朋友拿过来看后刚开始不觉得什么，一个通常的网站系统又能复杂的了哪去，但是越往后做就越发觉得…...
网站建设指引/企业网站seo优化外包
VBO与Displaylists的进一步讨论 Posted on 2006-04-21 22:50 panhongwei 阅读(257) 评论(0) 编辑 收藏 所属分类: 大规模地形渲染 之前写的关于VBO与Displaylists的讨论不是很详细，现在重新整理一下，不过需要注意的我的测试结果是在没做view frustum cu…...
广西自治区政府网站建设要求/电商关键词排名优化怎么做?
我们一般使用Windows函数MultiByteToWideChar将多字节字符串转换为宽字符字符串，函数原型如下： int MultiByteToWideChar( __in UINT CodePage, //与多字节字符串关联的一个代码页值，一般设为CP_ACP __in DWORD dwFlags, //指定额外的转换控制…...
网站开发客户需求/好看的web网页
需要设置代理的地方有三个 eclipse设定->一般->ネットワーク接続- 选 マニュアル 添加Http，Https，Socks代理 在下面添加例外 mavenusers文件夹下的.m2文件夹下的setting.xml 或者安装目录下conf文件夹中设置全局设置 <proxies> <prox…...