文章目录

1.设计来源
- 1.1 主界面
- 1.2 关于我界面
- 1.3 项目演示界面
- 1.4 联系我界面
2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 2.3 源码目录
源码下载

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

html实现好看的个人介绍，个人主页模板2(附源码) ，第二种风格，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。
代码备注详细，可在此基础上更加完善功能，打造属于自己的个人介绍主页。

1.设计来源

上一篇个人简介： html实现好看的个人介绍，个人主页模板1(附源码) 的第二种风格版，总共有五个版本，五种风格。

1.1 主界面

主界面，以名称，职称，图片展示个人主信息，这里以偶像杨洋示例，具体相关信息可以自己配置。动态加载职称，具体动态效果见下面视频介绍。兼容PC端，手机端。

1.2 关于我界面

关于我界面，以我的基本信息和关于我的文字描述，加上成长路程。

1.3 项目演示界面

项目演示界面，以做过的项目组成，用图片描述。

1.4 联系我界面

联系我界面，以留言发送的方式和其他联系方式构成。

2.效果和源码

2.1 动态效果

这里是完整的效果演示，可在此代码基础上更加完善功能，打造属于自己的个人介绍主页。

html实现好看的个人介绍，个人主页模板2(附源码)

2.2 源代码

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

<!doctype html>
<html 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, user-scalable=no">
<title>杨洋 - 个人简历</title>
<link rel="icon" href="images/favicon.png">
<link href="css/mycss.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
</head>
<body class="push-body">
<header id="main-navigation"><div class="container-fluid"><div class="row"><div class="col-md-12"> <a href="#" class="navbar-brand pull-right"></a><nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"> <a href="#" class="push_nav_brand">杨洋</a><ul class="push_nav"><li><a class="active scroll" href="#home">首页</a></li><li><a class="scroll" href="#aboutme">关于我</a></li><li><a class="scroll" href="#mywork">项目演示</a></li><li><a class="scroll" href="#contactme">联系我</a></li></ul><ul class="icons"><li title="微信分享"><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></li><li title="qq分享"><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></li><li title="微博分享"><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></li><li title="链接分享"><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></li><li title="githup分享"><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></li></ul></nav></div></div></div>
</header>
<div class="container-fluid"><div class="main-button left"><button class="toggle-menu menu-left push-body"> <span></span> <span></span> <span></span> </button></div>
</div><!-- Info-->
<div id="home" class="row section"><div class="container info text-center"><div class="row"><div class="col-xs-12 text-center"><div class="info_detail"><div class="zoom"><img src="data:images/alex.jpg" alt="alex"><div class="zoom-overlay"></div></div><h3>杨    洋</h3><p style="margin-top: 20px;">软件工程师 / 源码分享家</p><!-- Social Icons --><div class="icons"><ul><li title="微信分享"><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></li><li title="qq分享"><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></li><li title="微博分享"><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></li><li title="链接分享"><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></li><li title="脸书分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank" class="fa fb"><i class="fa fa-fw fa-facebook"></i></a></li><li title="谷歌分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank" class="fa fb"><i class="fa fa-fw fa-google-plus"></i></a></li><li title="githup分享"><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></li></ul></div></div></div></div><div class="button"> <a href="#contactme" data-target="contactme" class="btn active scroll">联系我</a> <a href="#mywork" data-target="mywork" class="btn scroll">项目演示</a> </div></div>
</div>
<a href="#." class="cd-top">TOP</a>
<script type="text/javascript" src="js/jquery-2.2.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</body>
</html>

2.3 源码目录

源码下载

html实现好看的个人介绍，个人主页模板2（源码）点击下载

html实现好看的个人介绍，个人主页模板2(附源码)相关推荐

html实现好看的个人介绍，个人主页模板3(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 教育成就界面 1.4 项目演示界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.2 源代码目录源码下 ...
html实现好看的个人介绍，个人主页模板5(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的介绍界面 1.3 我的能力界面 1.4 项目案例界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.3 源代码目录源码 ...
html实现好看的个人介绍，个人主页模板1(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 自我介绍界面 1.4 项目演示界面 1.5 个人成就界面 1.6 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码源码 ...
html实现好看的个人介绍，个人主页模板4(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的文章界面 1.3 我的相册界面 1.4 关于我界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.2 源代码目录源码下 ...
日志组件Log2Net的介绍和使用（附源码开源地址）
Log2Net是一个用于收集日志到数据库或文件的组件,支持.NET和.NetCore平台. 此组件自动收集系统的运行日志(服务器运行情况.在线人数等).异常日志.程序员还可以添加自定义日志. 该组件支 ...
一款好看的HTML介绍页、引导页源码
一款好看的个人极简介绍页.引导页源码,图标引用的是阿里巴巴矢量图标库,可引入自己的图标项目更换. 地图引入了高德的map lab 数据可视化,可用来做足迹,记录去过的地方. 页面信息修改都在index ...
微信小程序推送模板教程附源码
无聊的时候玩一下小功能踩踩坑首先模板推送需要准备一些材料准备材料:1)公众号|小程序,添加选择的模板消息,2)在设置>开发设置页面,开通消息模板功能:如: 如果还没模板素材的请新建一 ...
RoI Pooling 系列方法介绍（文末附源码）
作者简介 CW,广东深圳人,毕业于中山大学(SYSU)数据科学与计算机学院,毕业后就业于腾讯计算机系统有限公司技术工程与事业群(TEG)从事Devops工作,期间在AI LAB实习过,实操过道路交通元 ...
Node后端模板代码(附源码)
前言之前也写过简单的node服务器代码,但不算做事一个工程,这一次因为也需求,就写了这套后端模板. 从git上找的一些node模板,功能是可以实现,但工作流程理解起来有点困难,可能是小弟我水平有限, ...