【博主推荐】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/140293771

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码，大作业个人简历源码，大作业个人网站源码，页面内容有首页、关于我、我的项目、我的经验、我的技能、我的文章、联系我等功能块，用到菜单、表单、单选/多选、表格、自适应布局、锚点、轮播图、动画等技术点，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

1.1 主界面

    主界面，该界面左侧是菜单导航，点击三个横杠显示菜单，点击关闭，关闭菜单，点击对应的菜单，跳转到对应的内容。
在这里插入图片描述

    主界面，该界面右侧内容，是采用了轮播图的方式，展示自己喜欢的图片和生活名言，自己根据实际情况应用；

在这里插入图片描述

1.2 关于我界面

    关于我界面，该界面是是采用了图文结合+百分比占用，主要介绍自己相关信息，自己根据实际情况应用；
在这里插入图片描述

1.3 我的项目界面

    我的项目界面，该界面是是采用了单选/多选功能点，瀑布式布局，all代表全部显示，摄影，只显示摄影相关的内容，图文结合，自己根据实际情况应用；

在这里插入图片描述

1.4 我的经验界面

    我的经验界面，该界面是是采用了TAB和图文结合的轮播图，点击四个经验块，会出现每个经验块对应的文字描述，同事评价块是轮播五个同事对我的评价，这里用的是明星举例，自己根据实际情况应用；
在这里插入图片描述

1.5 我的技能界面

    我的技能界面，该界面是是分布式排列，展示了我的三个技能大面和每个技能下的技术点，自己根据实际情况应用；

在这里插入图片描述

1.6 我的文章界面

    我的文章界面，该界面是是图文结合的展示方式，鼠标悬浮出现文章时间、文章名称、文章简介、点击查看文章具体地址和查看更多文章操作，自己根据实际情况应用；

在这里插入图片描述

1.7 联系我界面

    联系我界面，该界面是表单展示和按钮操作，详细介绍联系我的方式和提供地址邮箱等信息，自己根据实际情况应用；

在这里插入图片描述

2.效果和源码

2.1 动态效果

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

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网

2.2 源代码

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

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="徐先生的个人简历、个人主页、个人网站">
<meta name="author" content="徐先生的个人简历、个人主页、个人网站">
<title>徐先生的个人简历、个人主页、个人网站</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">html,body,h1, h2, h3, h4, h5, h6,span,a,b{font-family: 华文中宋;}
</style>
</head><body>
<div class="container-fluid nopadding"><div class="row nopadding"><!-- Header start  --><div class="col-md-1 col-sm-1 col-xs-12 header nopadding text-center"><!--     Logo start  --><div class="logo"><a href="index.html"><img class="" src="images/logo.png" alt=""><h2>简历</h2></a></div><!--     logo end  --><div class="menu_icon" id="mynav"><p onclick="openNav()">&#9776;</p></div><!--     sidenav start  --><div id="mySidenav" class="sidenav"><div class="sidenav_left"><!--     Logo start  --><div class="logo_over hidden-xs"><a href="index.html"><img src="images/logo.png" alt=""><h2>简历</h2></a></div><!--     Logo end  --><!--   menu start  --><ul id="menu"><li data-menuanchor="page1" class="active"><a onclick="closeNav()" href="#page1">首页</a></li><li data-menuanchor="page2"><a onclick="closeNav()" href="#page2">关于我</a></li><li data-menuanchor="page3"><a onclick="closeNav()" href="#page3">我的项目</a></li><li data-menuanchor="page4"><a onclick="closeNav()" href="#page4">我的经验</a></li><li data-menuanchor="page5"><a onclick="closeNav()" href="#page5">我的技能</a></li><li data-menuanchor="page6"><a onclick="closeNav()" href="#page6">我的文章</a></li><li data-menuanchor="page7"><a onclick="closeNav()" href="#page7">联系我</a></li></ul><!--   menu end  --><div class="menu_close"><a href="javascript:void(0)" class="closebtn menu_icon" onclick="closeNav()">&times; 关闭</a></div></div><div class="sidenav_right hidden-xs"><div class="slogan_over"><h3>简历内容</h3></div></div></div><!--     sidenav end  --></div><!-- Header end  --><!-- content start  --><div class="col-md-11 col-sm-11 col-xs-12 content nopadding"><!-- Pagepilling start --><div id="pagepiling"><!-- Section one area start --><div class="section" id="section1"><div id="lionhero" class="owl-carousel owl-theme"><div class="item"><div class="slide one"></div><div class="welcome-text"><p><b>生活</b><br/>就是一个发现美的过程。</p><a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a></div></div><div class="item"><div class="slide two"></div><div class="welcome-text"><p><b>勤学</b><br/>与其用华丽的外衣装饰自己，不如用知识武装自己。</p><a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a></div></div><div class="item"><div class="slide three"></div><div class="welcome-text"><p><b>突破</b><br/>在困难面前，唯一的选择就是前进。</p><a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a></div></div></div><!-- more_link start --><div class="more_link"><a href="#page2">鼠标向下滚动 <br><i class="fa fa-angle-down"></i></a></div><!-- more_link end --></div><!-- Section one area end --><!-- Section seven area start --><div class="section " id="section7"><!-- intro start --><div class="intro contact"><div class="container-fluid nopadding"><div class="row nopadding "><div class="col-md-12 contact_form"><h2>联系我</h2><!-- contact form area start --><div class="col-md-6 col-sm-6 nopadding"><form id="contactForm" class="shake" data-toggle="validator"><div class="row"><div class="col-md-12"><div class="form-group"><input id="name" type="text" class="form-control" name="Name" autocomplete="off" placeholder="请输入您的名字" required data-error="请输入您的名字"><div class="help-block with-errors"></div></div></div><div class="col-md-12"><div class="form-group"><input id="email" type="email" class="form-control" name="email" autocomplete="off" placeholder="请输入您的邮箱" required data-error="请输入您的邮箱"><div class="help-block with-errors"></div></div></div><div class="col-md-12"><div class="form-group"><input id="msg_subject" type="text" class="form-control" name="msg_subject" autocomplete="off" placeholder="请输入您的主题" required data-error="请输入您的主题"><div class="help-block with-errors"></div></div></div></div><div class="row"><div class="col-md-12"><div class="form-group"><textarea id="message" class="form-control textarea" rows="3" name="Message" placeholder="请输入您说的内容" required data-error="请输入您说的内容"></textarea><div class="help-block with-errors"></div></div></div></div><div class="row"><div class="col-md-12"><button id="submit" type="submit" class="btn btn-contact">发送消息</button><div id="msgSubmit" class="h3 text-center hidden"></div><div class="clearfix"></div></div></div></form></div><!-- contact form area end --><!-- office address area start --><div class="col-md-5 col-sm-6 office"><div class="office-details"><i class="fa fa-map-marker"></i><span>徐先生的个人简历、个人主页、个人网站, <br>北京市,海淀区.</span></div><div class="office-details"><i class="fa fa-phone"></i><span>+133 1100 1100, +133 1100 1100</span></div><div class="office-details"><i class="fa fa-envelope"></i><span>test@126.com</span></div></div><!-- office address area end --><!-- social icon start --><div class="col-md-1 col-sm-12 social_icon text-right"><ul class="member-social"><li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-weixin"></i></a></li><li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-qq"></i></a></li><li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-weibo"></i></a></li><li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-linkedin"></i></a></li><li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-facebook"></i></a></li></ul></div><!-- social icon end --></div></div></div><div class="footer"><p>Copyright &copy; 2024.Company name 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><!-- intro end --></div><!-- Section seven area end --></div><!-- Pagepiling end --></div><!-- content end --></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body></html>

源码下载

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码（源码） 点击下载
在这里插入图片描述

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

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

请添加图片描述

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

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

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

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

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

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

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

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

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

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

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

相关文章

智能猫砂盆怎么买才不踩雷？2024热门的三款智能猫砂盆分享！

智能猫砂盆怎么买才不踩雷？2024热门的三款智能猫砂盆分享！

上班外出来不及铲屎怎么办&#xff1f;那当然是入手一个智能猫砂盆啦。实不相瞒&#xff0c;以前我也是被手动铲屎长期折磨的可怜铲屎官&#xff0c;但上班出差哪有空一直盯着猫砂盆看呢&#xff1f;索性后面一不做二不休直接购入了智能猫砂盆。如果你也想将家里的普通猫砂盆换…
阅读更多...
如何让 3D 数字孪生场景闪闪发光

如何让 3D 数字孪生场景闪闪发光

今日图扑软件功能分享&#xff1a;我们将探讨 HT 系统如何通过分组管理灯光、裁切体和流光&#xff0c;以提高场景光影效果的精准度和整体可控性。 HT 中的灯光、裁切体、流光是会影响它所在区域一定范围内的其他节点的表现&#xff0c;如 场景中有个 A 灯光&#xff0c;默认情…
阅读更多...
阿里云登陆Centos7

阿里云登陆Centos7

用自己电脑登陆Centos7太麻烦了&#xff0c;还要自己弄个虚拟机&#xff0c;一个电脑里面既有WIN又有LINUX&#xff0c;索性直接买个阿里云服务器&#xff0c;来学习Centos7。 购买 我是新用户&#xff0c;可以试用3个月&#xff0c;先用个3个月再说哈哈哈。 一系列操作之后…
阅读更多...
电竞玩家的云端盛宴！四大云电脑平台：ToDesk、顺网云、青椒云、极云普惠云实测大比拼

电竞玩家的云端盛宴！四大云电脑平台：ToDesk、顺网云、青椒云、极云普惠云实测大比拼

本文目录 一、云电脑概念及市场需求二、云电竞性能测试2.1 ToDesk云电脑2.2 顺网云2.3 青椒云2.4 极云普惠云电脑 三、四大云电脑平台综合配置对比3.1 CPU处理器3.2 GPU显卡3.3 内存 四、总结 一、云电脑概念及市场需求 在数字化时代的推动下&#xff0c;云计算技术日益成熟&a…
阅读更多...
关于嵌入式系统中的LED控制程序的一篇爽文

关于嵌入式系统中的LED控制程序的一篇爽文

嵌入式系统中的LED控制程序 在嵌入式系统中控制LED是一个很常见的任务&#xff0c;可以用于指示状态、显示信息等。我们将使用C语言编写一个简单的LED控制程序&#xff0c;该程序将控制一个虚拟的LED&#xff0c;但可以根据需要将其扩展到实际的硬件上。 准备工作 在开始之前…
阅读更多...
2024QS世界大学学科排名（各学科详细）

2024QS世界大学学科排名（各学科详细）

2024QS全球高校学科排名附榜单&#xff1a; 人文与艺术相关学科全球Top10 社会科学与管理相关学科全球Top10 自然科学相关学科全球Top10 工程与技术相关学科全球Top10 生命科学与医学相关学科全球Top10
阅读更多...
Flutter 是如何实现的 ？

Flutter 是如何实现的 ？

Flutter 是由 Google 开发的一个开源 UI 软件开发工具包&#xff0c;用于构建跨平台的应用程序。Flutter 的核心理念是提供一个高度可定制、快速和现代的 UI 框架&#xff0c;它允许开发者使用一套代码库构建 Android、iOS、Web 和桌面应用程序。以下是 Flutter 的一些关键实现…
阅读更多...
【基于R语言群体遗传学】-14-种群起源的相对似然

【基于R语言群体遗传学】-14-种群起源的相对似然

我们可以将预测的基因型比例视为在种群中看到一组特定等位基因的概率。如果种群在等位基因频率上存在差异&#xff0c;我们可以使用基因型来推断个体起源于每个种群的相对可能性。大家可以先看一下之前的博客&#xff1a;群体遗传学_tRNA做科研的博客-CSDN博客 种群起源的相对似…
阅读更多...
Python OpenCV 教学取得视频资讯

Python OpenCV 教学取得视频资讯

这篇教学会介绍使用OpenCV&#xff0c;取得影像的长宽尺寸、以及读取影像中某些像素的颜色数值。 因为程式中的OpenCV 会需要使用镜头或GPU&#xff0c;所以请使用本机环境( 参考&#xff1a;使用Python 虚拟环境) 或使用Anaconda Jupyter 进行实作( 参考&#xff1a;使用Anaco…
阅读更多...
基于Python的51job招聘数据采集与可视化项目实践

基于Python的51job招聘数据采集与可视化项目实践

项目背景与目标 在当今竞争激烈的就业市场中&#xff0c;深入分析招聘信息对于求职者和企业都具有重要意义。基于Python的51job招聘数据采集与可视化项目旨在通过自动化手段高效获取大量招聘信息&#xff0c;并对这些数据进行深度分析和展示。 51job作为中国领先的招聘网站&…
阅读更多...
RockyLinux9上安装Nacos2.3.0（非Docker安装）

RockyLinux9上安装Nacos2.3.0（非Docker安装）

RockyLinux9上安装Nacos2.3.0 说明什么是Nacos下载并安装创建一个nacos-conf数据库修改application.properties文件 启动访问网址查看是否成功 开启访问鉴权 说明 本文采用的是&#xff1a;安装包安装&#xff0c;非Docker安装&#xff0c;系统采用的Rocky Linux9.4。   当前…
阅读更多...
C++ 【 Open3D 】 读取、可视化并保存点云

C++ 【 Open3D 】 读取、可视化并保存点云

一、读取常见点云 #include <iostream> #include <Open3D/Open3D.h>int main(int argc, char* argv[]) {std::string fileName("hand.pcd");auto cloud_ptr std::make_shared<open3d::geometry::PointCloud>();if (open3d::io::ReadPointCloud(f…
阅读更多...
警钟！电池储能安全事故频发！物联网技术如何加强储能安全排查？

警钟！电池储能安全事故频发！物联网技术如何加强储能安全排查？

在新能源时代背景下&#xff0c;储能系统作为能源转型的关键支撑技术&#xff0c;其安全问题日益凸显&#xff0c;尤其是近期海外电池项目连续发生的事故&#xff0c;为全球储能行业敲响了警钟。面对这一挑战&#xff0c;物联网技术以其强大的数据采集、智能分析与远程监控能力…
阅读更多...
Python基础知识——（002）

Python基础知识——（002）

文章目录 P8——7. input函数的使用 基本的输入函数input P9——8. Python中的注释 P10——9. Python中的缩进与本章总结 本章总结 P11——10. 章节习题 P8——7. input函数的使用 基本的输入函数input 语法结构&#xff1a; x input(提示文字) 注意事项&#xff1a;无论输…
阅读更多...
PMON的解读和开发

PMON的解读和开发

提示&#xff1a;龙芯2K1000PMON相关记录 文章目录 1 PMON的发展和编译环境PMONPMON2000 2 PMON2000的目录结构3 Targets目录的组成4 PMON编译环境的建立5 PMON2000的框架6 异常向量表7 Pmon的空间分配8 PMON的汇编部分(starto.S或sbdreset.S)的解读Start.SC代码部分dbginit 9 …
阅读更多...
点云曲面提取

点云曲面提取

csdn是不是有有什么大bing&#xff1f;gif只能上传5m我吐了在线GIF动图压缩 - docsmall 在线GIF动图压缩工具,在线GIF动图压缩软件 代码整理中
阅读更多...
单元测试Spring 上下文加载过程中遇到的阻塞或死锁问题

单元测试Spring 上下文加载过程中遇到的阻塞或死锁问题

IDEA单元测试一直转圈&#xff0c;阻塞&#xff0c;前置后置的方法都不执行&#xff0c;无任何输出 1.单元测试类 SpringBootTest(classes {BareMetalApplication.class}) RunWith(SpringRunner.class) public class K8sUserNfsStoreInitServiceImplTest {BeforeEachpublic…
阅读更多...
【结构性型模式-适配器模式】

【结构性型模式-适配器模式】

定义 将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类能一起工作。 适配器模式分为类适配器模式和对象适配器模式&#xff0c;前者类之间的耦合度比后者高&#xff0c;且要求程序员了解现有组件库中的相关组件的内部结…
阅读更多...
基于Java+SpringMvc+Vue技术的图书管理系统的设计与实现(60页论文参考)

基于Java+SpringMvc+Vue技术的图书管理系统的设计与实现(60页论文参考)

博主介绍&#xff1a;硕士研究生&#xff0c;专注于Java技术领域开发与管理&#xff0c;以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年&#xff0c;拥有近12年的管理工作经验&#xff0c;拥有较丰富的技术架构思想、较扎实的技术功底和资深的项目管理经…
阅读更多...
RISC-V 指令系统

RISC-V 指令系统

指令系统 指令集 指令集从本质上可以分为复杂指令集&#xff08;Complex Instruction Set Computing&#xff0c;CISC&#xff09;和精简指令集&#xff08;Reduced Instruction Set Computing&#xff0c;RISC&#xff09;两种。复杂指令集的特点是能够在一条指令内完成很多…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023