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

置顶 xcLeigh

已于 2024-08-28 10:03:04 修改

阅读量1.6w

点赞数 27

分类专栏： HTML5实战案例资源源码文章标签： html 数学建模前端

于 2023-06-16 20:43:18 首次发布

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/131253102

版权

HTML5实战案例同时被 2 个专栏收录

135 篇文章 108 订阅

订阅专栏

资源源码

120 篇文章 93 订阅

订阅专栏

文章目录

1.设计来源
2.效果和源码
- 2.1 动态效果
- 2.2 源代码
源码下载

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

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

1.设计来源

个人介绍、个人主页模板第一个风格版，总共有五个版本，五种风格。

-DONE-

1.1 主界面

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

请添加图片描述

1.2 关于我界面

关于我界面，以我的基本信息和关于我的文字描述加上生活日常照片组成。

请添加图片描述

1.3 自我介绍界面

自我介绍界面，以我的教育和项目经验组成，介绍教育情况和任职公司情况。
请添加图片描述

1.4 项目演示界面

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

请添加图片描述

1.5 个人成就界面

个人成就界面，以自己独立做的项目为例，支持跳转自己项目地址查看。

请添加图片描述

1.6 联系我界面

联系我界面，以名称、邮箱、手机号、主题、内容来发送留言，这里只是界面，没有数据。

请添加图片描述

2.效果和源码

2.1 动态效果

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

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

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,chrome=1">
        <meta name="description" content="xcLeigh">
        <title>杨洋 - 个人简历</title>
        <link rel="icon" href="images/favicon.png">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/animate.min.css">
        <link rel="stylesheet" href="css/mycss.css">
    </head>
    <body>
        <div id="preloader">
            <div id="loader-wrapper">
                <div class="box">
        			<div class="loader6"></div>
        		</div>
            </div>
        </div>
        <div class="section cover-section active" id="home">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="profile-area">
                            <div class="profile-content wow fadeInDown animated" data-wow-delay="0.2s">
                                <h2>杨&nbsp;&nbsp;洋</h2>
                                <p>我是一个 <b> <span class="rotate">软件工程师,技术贴专家,源码分享家</span>  </b></p>
                                <div class="social-media">
                                    <ul>
                                        <li title="微信分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank"><i class="fa fa-weixin"></i></a></li>
                                        <li title="qq分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank"><i class="fa fa-qq"></i></a></li>
                                        <li title="微博分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank"><i class="fa fa-weibo"></i></a></li>
                                        <li title="链接分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank"><i class="fa fa-chain"></i></a></li>
                                        <li title="脸书分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank"><i class="fa fa-facebook"></i></a></li>
                                        <li title="谷歌分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank"><i class="fa fa-google-plus"></i></a></li>
                                        <li title="githup分享"><a href="https://blog.csdn.net/weixin_43151418/article/details/131242976" target="_blank"><i class="fa fa-github-alt"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <nav class="header-section navbar navbar-default">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav" id="top-menu">
                                <li class="active">
                                    <a href="#home">
                                        <img src="images/profile-pic.jpg" class="img-responsive" width="190" height="190" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="#about">
                                        <i class="fa fa-user" aria-hidden="true"></i>
                                        <span>关于我</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#resume">
                                        <i class="fa fa-briefcase" aria-hidden="true"></i>
                                        <span>自我介绍</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#portfolio">
                                        <i class="fa fa-camera" aria-hidden="true"></i>
                                        <span>项目演示</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#news">
                                        <i class="fa fa-comments" aria-hidden="true"></i>
                                        <span>个人成就</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#contact">
                                        <i class="fa fa-phone" aria-hidden="true"></i>
                                        <span>联系我</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <script src="js/vendor/jquery-1.11.2.min.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/myscript.js"></script>
    </body>
</html>

源码下载

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

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

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

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

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

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

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

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