【HTML | CSS | Javascript】一款响应式精美简历模板分享（万字长文 | 附源码）

2023年11月6日上午12:30 • Python • 阅读 36

【HTML | CSS | Javascript】一款响应式精美简历模板分享（万字长文 | 附源码）

💂 作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。
💅 文章概要： 各位C站的小伙伴们，今天闲来无事逛Github，无意中发现了这款精美的个人简历模板，刚好可以用作我的个人博客的简历介绍，兴奋之余便写下这篇文章将这款模板分享给大家！让我们一起来看看吧！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！
🤟 每日一言： 你可以遗憾，但是你绝对不能后悔。遗憾证明你努力过了，只是力有不逮。而后悔，只能说明你当时没努力过。

; 前言

各位C站的小伙伴们，今天闲来无事逛Github，无意中发现了这款精美的个人简历模板，刚好可以用作我的个人博客的简历介绍，兴奋之余便写下这篇文章将这款模板分享给大家！由于个人能力有限，本篇文章只做 分享和 个性化修改讲解，会在文末将代码粘出来供大家一起学习探讨！

响应式布局介绍

响应式布局 是 Ethan Marcotte 在 2010年5月份 提出的一个概念，简而言之，就是 一个网站能够兼容多个终端 ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验 ，而且随着大屏幕移动设备的普及，用”大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

; 简历模板效果演示

PC端效果演示

; 手机端效果演示

IPAD竖屏效果演示

; IPAD横屏效果演示

完整源码

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/re/re/assets/css/styles.css">

        <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
        <title>Portfolio website completetitle>
    head>
    <body>

        <header class="l-header">
            <nav class="nav bd-grid">
                <div>
                    <a href="#" class="nav__logo">Marlona>
                div>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item"><a href="#home" class="nav__link active">Homea>li>
                        <li class="nav__item"><a href="#about" class="nav__link">Abouta>li>
                        <li class="nav__item"><a href="#skills" class="nav__link">Skillsa>li>
                        <li class="nav__item"><a href="#work" class="nav__link">Worka>li>
                        <li class="nav__item"><a href="#contact" class="nav__link">Contacta>li>
                    ul>
                div>

                <div class="nav__toggle" id="nav-toggle">
                    <i class='bx bx-menu'>i>
                div>
            nav>
        header>

        <main class="l-main">

            <section class="home bd-grid" id="home">
                <div class="home__data">
                    <h1 class="home__title">Hi,<br>I'am <span class="home__title-color">Marlonspan><br> Web Designerh1>

                    <a href="#" class="button">Contacta>
                div>

                <div class="home__social">
                    <a href="" class="home__social-icon"><i class='bx bxl-linkedin'>i>a>
                    <a href="" class="home__social-icon"><i class='bx bxl-behance' >i>a>
                    <a href="" class="home__social-icon"><i class='bx bxl-github' >i>a>
                div>

                <div class="home__img">
                    <svg class="home__blob" viewBox="0 0 479 467" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <mask id="mask0" mask-type="alpha">
                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
                        mask>
                        <g mask="url(#mask0)">
                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
                            <image class="home__blob-img" x="50" y="60" href="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/perfil.png"/>
                        g>
                    svg>
                div>
            section>

            <section class="about section " id="about">
                <h2 class="section-title">Abouth2>

                <div class="about__container bd-grid">
                    <div class="about__img">
                        <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/
about.jpg" alt="">
                    div>

                    <div>
                        <h2 class="about__subtitle">I'am Marlonh2>
                        <p class="about__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate cum expedita quo culpa tempora, assumenda, quis fugiat ut voluptates soluta, aut earum nemo recusandae cumque perferendis! Recusandae alias accusamus atque.p>
                    div>
                div>
            section>

            <section class="skills section" id="skills">
                <h2 class="section-title">Skillsh2>

                <div class="skills__container bd-grid">
                    <div>
                        <h2 class="skills__subtitle">Profesional Skillsh2>
                        <p class="skills__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit optio id vero amet, alias architecto consectetur error eum eaque sit.p>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bxl-html5 skills__icon'>i>
                                <span class="skills__name">HTML5span>
                            div>
                            <div class="skills__bar skills__html">

                            div>
                            <div>
                                <span class="skills__percentage">95%span>
                            div>
                        div>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bxl-css3 skills__icon'>i>
                                <span class="skills__name">CSS3span>
                            div>
                            <div class="skills__bar skills__css">

                            div>
                            <div>
                                <span class="skills__percentage">85%span>
                            div>
                        div>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bxl-javascript skills__icon' >i>
                                <span class="skills__name">JAVASCRIPTspan>
                            div>
                            <div class="skills__bar skills__js">

                            div>
                            <div>
                                <span class="skills__percentage">65%span>
                            div>
                        div>
                        <div class="skills__data">
                            <div class="skills__names">
                                <i class='bx bxs-paint skills__icon'>i>
                                <span class="skills__name">UX/UIspan>
                            div>
                            <div class="skills__bar skills__ux">

                            div>
                            <div>
                                <span class="skills__percentage">85%span>
                            div>
                        div>
                    div>

                    <div>
                        <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work3.jpg" alt="" class="skills__img">
                    div>
                div>
            section>

            <section class="work section" id="work">
                <h2 class="section-title">Workh2>

                <div class="work__container bd-grid">
                    <a href="" class="work__img">
                        <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work1.jpg" alt="">
                    a>
                    <a href="" class="work__img">
                        <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work2.jpg" alt="">
                    a>
                    <a href="" class="work__img">
                        <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work3.jpg" alt="">
                    a>
                    <a href="" class="work__img">
                        <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work4.jpg" alt="">
                    a>
                    <a href="" class="work__img">
                        <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work5.jpg" alt="">
                    a>
                    <a href="" class="work__img">
                        <img src="http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work6.jpg" alt="">
                    a>
                div>
            section>

            <section class="contact section" id="contact">
                <h2 class="section-title">Contacth2>

                <div class="contact__container bd-grid">
                    <form action="" class="contact__form">
                        <input type="text" placeholder="Name" class="contact__input">
                        <input type="mail" placeholder="Email" class="contact__input">
                        <textarea name="" id="" cols="0" rows="10" class="contact__input">textarea>
                        <input type="button" value="Enviar" class="contact__button button">
                    form>
                div>
            section>
        main>

        <footer class="footer">
            <p class="footer__title">Marlonp>
            <div class="footer__social">
                <a href="#" class="footer__icon"><i class='bx bxl-facebook' >i>a>
                <a href="#" class="footer__icon"><i class='bx bxl-instagram' >i>a>
                <a href="#" class="footer__icon"><i class='bx bxl-twitter' >i>a>
            div>
            <p class="footer__copy">© Bedimcode. All rigths reservedp>
        footer>

        <script src="https://unpkg.com/scrollreveal">script>

        <script>

const showMenu = (toggleId, navId) =>{
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)

    if(toggle && nav){
        toggle.addEventListener('click', ()=>{
            nav.classList.toggle('show')
        })
    }
}
showMenu('nav-toggle','nav-menu')

const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')

    navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

const sections = document.querySelectorAll('section[id]')

function scrollActive(){
    const scrollY = window.pageYOffset

    sections.forEach(current =>{
        const sectionHeight = current.offsetHeight
        const sectionTop = current.offsetTop - 50;
        sectionId = current.getAttribute('id')

        if(scrollY > sectionTop && scrollY  sectionTop + sectionHeight){
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active')
        }else{
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active')
        }
    })
}
window.addEventListener('scroll', scrollActive)

const sr = ScrollReveal({
    origin: 'top',
    distance: '60px',
    duration: 2000,
    delay: 200,

});

sr.reveal('.home__data, .about__img, .skills__subtitle, .skills__text',{});
sr.reveal('.home__img, .about__subtitle, .about__text, .skills__img',{delay: 400});
sr.reveal('.home__social-icon',{ interval: 200});
sr.reveal('.skills__data, .work__img, .contact__input',{interval: 200});

        script>
    body>
html>

个性化修改

在上方提供了完 整的网页源码，各位小伙伴们只需要点击右上角的 一键复制然后将源码粘贴到一个 HTML文件中便可以实现gif图中的效果，同时该简历模板是响应式的，无论是 PC端还是 移动端都可以进行完美的适配。

PS：模板中所有图片以上载到我的个人网站中，并且已经将链接替换到代码中，直接复制源码即可运行，无需担心图片丢失问题！

不过由于本网页的CSS代码实在过于冗长，我已经将它上载到我的个人网站中并且引入了，想查看CSS源码的小伙伴可以复制链接粘贴到网址查看。
代码全部积压在一个文件中不利于代码的查看，因为是出于让C站的小伙伴 方便复制代码才全部放入一个文件中，所以各位小伙伴们复制完后可以将 CSS和 Javascript部分的代码分离出来然后在HTML文件中使用 <link>标签引入！
但是总的来说上方的模板毕竟默认资料都是别人的，那么应该如何进行 个性化修改将其变为属于我们自己的模板呢？下面就是具体的 分步步骤啦，我将其分为了 四大部分，各位小伙伴一起跟着我的脚步来吧！

姓名标签修改
font图标文字修改
图片修改
*文字说明修改

; 姓名标签修改

姓名标签修改主要是将原模版中的人物名字和有关的个人介绍相关信息进行修改，位置如下几张图所示：

（一）修改抬头栏的 【姓名标签】

（二）修改 Home 标签下的 【个人简介】

（三）修改 About 标签下的 【个人介绍】

（四）修改 网页底部 的 【个人标签】

font图标文字修改

font图标文字修改主要是将原网页中的 推特，脸书等文字图标还有 个人技能前Html，Css等文字图标进行替换。

修改Home标签下的【font图标文字】

（一）登录 boxicon官网 ：boxicon网页地址

（二）选择自己心仪的图标文字，弹出相应的窗口， 复制下图框中所示图标文字代码

（三）将代码替换原文件中的图标文字代码，如下图所示：

PS：博主亲测——boxicon上很多文字图标都无法显示，并且图标种类少，博主建议各位小伙伴们使用Font-Awesome进行文字图标的引入!

关于Font-Awesome文字图标的引入方法参考博主这篇文章：Font-Awesome如何引入矢量字体图标 由于此文章是很久之前写的，那时的博主文章排版很乱，还请各位小伙伴将就一下啦！

; 修改Skills标签下的【font图标文字】

（一）步骤同上，下方只列举需要修改的位置：

修改网页底部下的【font图标文字】

（一）步骤同上，下方只列举需要修改的位置：

; 图片修改

图片修改主要是修改简介模板中的各种图片，将其替换为属于自己的图片，包括个人形象图片，工作图片等

（一）修改 Home 标签下的 【个人形象图片】

（二）修改 About 标签下的 【个人形象图片】

（三）修改 Skills 标签下的 【展示图片】

（四）修改 Work 标签下的 【展示图片】

文字说明修改

文字说明修改主要是针对简介模板中的各种文字说明进行修改，包括 英文改为中文， 个人简介的撰写等等，在此不在赘述， 只需对照源代码找到对应文本的地方即可。

写在最后的话

本文分享了一个精美的响应式简历模板，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦， 你们的支持是我最大的动力！

✨原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！ \textcolor{9c81c1}{点赞，你的认可是我创作的动力！}点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{ed7976}{收藏，你的青睐是我努力的方向！}收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！ \textcolor{98c091}{评论，你的意见是我进步的财富！}评论，你的意见是我进步的财富！

Original: https://blog.csdn.net/weixin_59480481/article/details/128607981
Author: THUNDER王
Title: 【HTML | CSS | Javascript】一款响应式精美简历模板分享（万字长文 | 附源码）

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/812351/

转载文章受原作者版权保护。转载请注明原作者出处！

python

【自取】最近整理的，有需要可以领取学习：

Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言刷题答案下载！

pandas期末复习

Pandas（Python Data Analysis Library）是基于NumPy的数据分析模块，它提供了大量标准数据模型和高效操作大型数据集所需的工具，可以说Pandas是…

Python 2023年8月16日
0064
java 弹力球_pygame系列_弹力球

这是pygame写的弹力球运行效果： ======================================================== 代码部分： =======…

Python 2023年9月25日
0053
python中的运算符

python运算符算数运算符符号含义 + 加 – 减 * 乘 / 除 // 整除 % 取余 * 幂运算 = 赋值 += 加等 -= 减等 = 乘等 /= 除等 /…

Python 2023年5月24日
0076
并发编程Bug起源:可见性、有序性和原子性问题

以前古老的 DOS操作系统，是单进行的系统。系统每次只能做一件事情，完成了一个任务才能继续下一个任务。每次只能做一件事情，比如在听歌的时候不能打开网页。所有的任务操作都按照串行的方…

Python 2023年10月23日
0046
超实用的7种 pytorch 网络可视化方法，进来收藏一波

引导 * – 前言 – 1. torchsummary – 2. graphviz + torchviz – 3. Jupyter …

Python 2023年9月15日
0055
Python自学第十八天——飞机大战项目实践（一）

作为新手自学Python的第十八天，技术低微，希望可以通过这种方式督促自己学习。个人学习环境：python3.9，PyCharm 2021.3.2 (Community Edit…

Python 2023年9月21日
0041
python：删除DataFrame中某列值为NaN的记录/行

关于 dropna(axis=0, how=’any’, thresh=None, subset=None, inplace=False)参数的说明： axis：默认是0，即删除行…

Python 2023年8月6日
0091
爬虫pandas，数据清洗——-周东海

import pandas as pd print(pd.__version__) #定义字典 mydataset = { ‘sites’ : ["Google&quot…

Python 2023年8月8日
0050
MYSQL 主从复制 — binlog

一个MYSQL数据库存在的问题在谈主从复制之前，应该都会有一个疑问，那么就是一个MYSQL数据库存在的问题呢？读和写所有压力都由一台数据库承担，压力大数据库服务器磁盘损坏则数…

Python 2023年9月16日
0064
【数据分析】基于RFM模型的线上零售中的客户细分（二）：RFM模型实战

基于RFM模型的线上零售中的客户细分（二）摘要：在上一篇博客《基于RFM模型的线上零售中的客户细分（一）：客户细分》中，我们了解了什么是客户细分，这篇博客将会结合具体的商业实例介…

Python 2023年8月7日
0076
python安装第三方库

方法一：pip命令行直接安装打开cmd命令窗口，通过命令 _pip install 包名_进行第三库安装，此方法简单快捷，示例安装keras库。注意：安装成功会显示 Succe…

Python 2023年9月25日
0046
Python基础学习【一万八千词】

一、Python数据类型类型例子整数浮点数字符串 Numpy数组类型例子布尔型 Pandas类型自定义二、数字 a = 1 print("整型类型：&quot…

Python 2023年8月19日
0040
【Linux项目自动化构建工具 make/Makefile】

目录 1 背景 2 原理 3 Linux第一个小程序－进度条 3.1 行缓冲区概念 3.2 进度条代码 4 总结 1 背景在VS中我们知道当我们想要运行程序时直接按f5程序就会自…

Python 2023年11月7日
0049
十年测试经验的阿里p10讲解python初阶：函数和模块 python全栈自动化测试系类4-2

还是老规矩，大家可能对凡哥不是很了解这里先和大家来个自我介绍凡哥我已经有着十二年互联网自动化测试和测试开发工程师，拥有丰富的自动化测试平台及测试开发经验，擅长接口测试、Pytho…

Python 2023年8月4日
0041
【Django】开发日报_14_Day：手机号码管理系统-实现上传文件功能

目录 * – + * 文件上传 * – （1）基本操作 – （2）上传Excel – + 案例1：批量上传 – （3）F…

Python 2023年8月5日
0051
Python制作炫酷的个人足迹地图

用Python来绘制自己的个人足迹地图，精确到市级别。首先我们需要安装以下Python的第三方模块: echarts-china-cities-pypkg==0.0.9 ech…

Python 2023年5月23日
0056

2024 年 5 月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31