菜单 搜索
首页 前端知识 html实现好看的个人介绍，个人主页模板3(附源码)

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

2024-06-14 09:06:22 前端知识 前端哥 244 944 我要收藏

文章目录

  • 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>
            &nbsp;&nbsp;&nbsp;&nbsp;杨洋，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">
              &nbsp;&nbsp;&nbsp;&nbsp;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（防止抄袭，原文地址不可删除）

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12065.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【JQuery】返回的JSON数据解析错误问题

2024-06-20 00:06:30

html css javascript jquery bootstarp响应式旅行社旅游平台网站模板(14页)

2024-06-20 00:06:22

HTML期末作业 蛋糕bootstrap响应式网站html css javascript jquery bootstarp

2024-05-26 00:05:19

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

jQuery实现购物车完整功能，script css完整代码 详细解释，可复制粘贴使用，更改图片及相关数据即可

2024-06-20 00:06:10

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

ECharts图例中的圆点怎么去掉

2024-06-20 00:06:04

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！