当前位置: 首页 > news >正文

非常好看的html网页个人简历

一. 前言

文末获取gitee链接

在前几天逛b站的时候,发现了个比较实用的东西-----个人简介网页版,相当于网页版的个人简历,相较于PDF形式的,网页版所能呈现内容更加丰富,而且更加美观,在BOOS上被HR小姐姐要简历的时候,给她一个网址,岂不是美哉(#.#)。

这个是别的人一个开源项目,给大家推荐的原因呢,有三个:

  1. 界面美观,动画给力。
  2. 代码简单,只包括一个HTML和一个CSS,便于在它上面进行修改,我这个零基础的小白,经过一番琢磨后,也能让它为我所用,甚至更上一层楼,有些夸张了哈(⊙o⊙)…
  3. 适配了手机端,即使HR小姐姐是用手机在和你聊天,也能完美地展现自己。

另外GitHub或者Gitee上可以免费托管自己的网页,好像域名也可以修改,这个不确定哈!所以这让上面所说的成为了可能,具体的托管教程,可以参考官方教程

https://gitee.com/help/articles/4136

原效果图如下:

请添加图片描述

下面就教大家如何修改,让它成为自己的一份非常炫酷简历。

二. 源码分析

(1) html

1. 先来看head标签里面的代码

第一个箭头指的是 这个网页的标题,可以修改为自己的名字

请添加图片描述

第二个箭头指的是icon图标库,示例图的性别前面的图标,将其中的href里面的内容复制到浏览器中打开可以得到一下内容
请添加图片描述

箭头指向的地方,为一个个的icon图标,画横线的位置为这个图标的名字,稍后教怎么使用。head里面的内容就介绍完了

2. 在来看看body表情下的内容

一共分为5个部分,简单的来说,就是三个。

请添加图片描述

id= head: 第一个箭头表示显示图片的地址,第二个箭头表示显示的名字
请添加图片描述

main-x: 所画横线的内容依次为: 背景图片,点击后跳转的网页,icon图标,显示的文字。其中icon图标的名字就是从上面说的网址中寻找的。

请添加图片描述

3.最后还有一段JavaScript写的代码

每一次刷新网页的时候,就会随机获取一段文字,显示在界面上。

请添加图片描述

(4)CSS文件

主要是用来对html文件进行美化使用的,具体怎么美化也不需要了解。例如下面这段内容,就指定了main-2的大小和一个相对位置等其它一些基本的要素。可以简单看一下
请添加图片描述

Gitee下载链接 : https://gitee.com/whpUp/individual_resume , 我完善一点点功能,需要的可以自行下载

相关文章:

非常好看的html网页个人简历

一. 前言 文末获取gitee链接 在前几天逛b站的时候,发现了个比较实用的东西-----个人简介网页版,相当于网页版的个人简历,相较于PDF形式的,网页版所能呈现内容更加丰富,而且更加美观,在BOOS上被HR小姐姐要…...

轻量级网络模型ShuffleNet V2

在学习ShuffleNet V2内容前需要简单了解卷积神经网络和MobileNet,以及Shuffnet V1的相关内容,大家可以出门左转,去看我之前的几篇博客MobileNet发展脉络(V1-V2-V3),轻量级网络模型ShuffleNet V1🆗&#xff…...

分享美容美发会员管理系统功能的特点_美容美发会员管理系统怎么做

人们越来越关心美发,美发行业发展迅速,小程序可以连接在线场景,许多美发院也开发了会员卡管理系统。那么一个实用的美发会员管理系统怎么制作呢?它有什么功能?我们一起来看看~(干货满满,耐心看完…...

Oracle-05-DCL篇

🏆一、简介 Oracle的DCL代表数据库控制语言,用于管理数据库对象的访问和安全性。DCL的两个主要命令是GRANT和REVOKE。 GRANT命令用于授予用户或角色对数据库对象的访问权限,例如表、视图或存储过程。GRANT命令的语法如下: GRANT privilege_name [, privilege_name]... …...

tess4j简单使用入门

tess4j下载 下载地址: https://sourceforge.net/projects/tess4j/ 不要直接下载,点击files,然后下载最新版 下载解压后放到指定的目录即可,这里放到d:\jar目录下 tess4j根目录: d:\jar\tess4j tess4j使用 把test4j项目目录中dist和lib目录下的所有jar包导入到需要的项目中…...

WebGPU学习(4)---使用 UniformBuffer

接下来让我们使用 UniformBuffer。UniformBuffer 是一个只读内存区域,可以在着色器上访问。 这次,我们将传递给着色器的矩阵存储在 UniformBuffer 中。演示示例 1.在顶点着色器中的 UniformBuffer 这次我们在顶点着色器里定义一个名为Uniforms的新结构体…...

Http客户端Feign-远程调用

Feign的使用步骤 引入依赖添加EnableFeignClients注解编写FeignClient接口使用FeignClient中定义的方法代替RestTemplate Feign的日志配置 1.方式一是配置文件,feign.client.config.xxx.loggerLevel 如果xxx是default则代表全局如果xxx是服务名称,例如userservi…...

RK3568镜像的拆包和打包

文章目录 前言一、window上分包和打包分包打包二、Linux上分包和打包分包打包总结前言 本文记录在win10上利用瑞芯微提供的工具进行分包和打包,同样也有Linux教程 提示:以下是本篇文章正文内容,下面案例可供参考 一、window上分包和打包 分包 window下一般直接利用工具即…...

《设计模式》适配器模式

《设计模式》适配器模式 适配器(Adapter)是一种结构型设计模式,它允许我们将一个类的接口转换成另一个类的接口,从而使得原本由于接口不兼容而无法合作的类能够一起工作。适配器模式通常用于以下情况: 在已有的类中添…...

linux 随笔 5-服务管理

0. 装到虚拟机与物理机,感觉各有各的不方便 Linux下systemctl命令和service、chkconfig命令的区别 1. service 根据/etc/init.d目录下的配置,做服务相关的: 启动停止重新启动关闭系统服务 2. chkconfig 用于维护 /etc/rc[0-6].d 的命令…...

【java基础】枚举类(enum)

文章目录基本介绍快速使用字段、方法、构造器枚举类方法toString方法valueOf方法values方法ordinal方法基本介绍 在java中有一种特殊的类型就是枚举类,对于一个有限的有固定值的集合,我们就可以考虑使用枚举类来进行表示,例如服装的大小为 小…...

Linux2

(1)root用户的主目录: (3)查看 (4)远程登陆系统:CentOS7上使用ifconfig查看IP,使用putty远程登陆 (5)查询目前用户登录情况:who命令…...

C语言基础应用(二)数据的转换与输入输出

学习了C语言的基本数据类型后,我们可能会想这些数据如何进行运算,是否可以让不同类型的数据直接进行运算呢? 一、数据类型转换 1.1 int类型与float类型之间的转换 int i 5; // j值为2.000000 因为左右操作数均为整型float j i/2; // …...

C# 用NPOI读取EXCEL

1. 复制DLL文件 ICSharpCode.SharpZipLib.dll NPOI.dll NPOI.OOXML.dll NPOI.OpenXml4Net.dll NPOI.OpenXmlFormats.dll 2. 在工程中添加引用 3. using System.IO; using NPOI.HSSF.UserModel; using NPOI.XSSF.UserModel; using NPOI.SS.UserModel; using NPOI.OpenXml4Ne…...

《高性能MySQL》——MySQL基准测试(笔记)

文章目录二、MySQL基准测试2.1 为什么需要基准测试2.2 基准测试的策略2.2.1 测试何种指标2.3 基准测试方法2.3.1设计和规划基准测试2.3.2 基准测试应该运行多长时间2.3.3 获取系统性能和状态2.3.4 获得准确的测试结果2.3.5 运行基准测试并分析结果2.3.6 绘图的重要性2.4 基准测…...

微服务注册到Nacos后如何读取外网IP

背景 微服务部署后,各服务是需要相互间调用的,其中服务A在去调用服务B的时候发现无法调用成功。其中服务注册和发现中心以及配置中心使用的是Nacos。Nacos客户端在注册服务时会从机器网卡中选择其中一个IP来注册,当我们要部署的机器存在多个…...

【华为OD机试模拟题】用 C++ 实现 - 匿名信(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 货币单位换算(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 选座位(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 停车场最大距离(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 重组字符串(2023.Q1) 【华为OD机试模…...

nginx配置https域名

如果已安装nginx若没有配置ssl模块需要添加ssl模块。注意:默认是不会安装ssl模块的查看nginx是否有安装ssl模块./nginx -V若执行结果显示下图中的-with-http_ssl_module则说明nginx已经安装了ssl模块若没有安装则重新打包编译./configure --with-http_ssl_module编译…...

c语言tips-大端小端存储介绍和使用union判断大小端

1. 大小端介绍 大端(Big Endian)和小端(Little Endian)是两种CPU或者计算机系统存储数据的方式。 在大端系统中,数据的高位字节(MSB)存储在内存地址的低位,低位字节(LSB…...

DevOps落地与转型:提升研发效能的方法与实践

❤️作者主页:小虚竹 ❤️作者简介:大家好,我是小虚竹。Java领域优质创作者🏆,CSDN博客专家🏆,华为云享专家🏆,掘金年度人气作者🏆,阿里云专家博主&#x1f3…...

【测试】loadrunner安装

努力经营当下,直至未来明朗! 文章目录备注一、下载安装包二、安装loadrunner三、修改浏览器配置今天搬砖不努力,明天地位不稳定! 备注 电脑最好有IE浏览器,但是没有也没事儿。(注意:IE浏览器不…...

物联网的新应用--触摸物联网

摘要:本文介绍一下触摸物联网的新进展--电子皮肤的物联网应用。还以为物联网的作用领域单单是从现场采集数据或者传输命令到执行设备吗?不,物联网的应用范围远比控制一盏灯大的多。据网上报道,香港城市大学(城大&#…...

用 Python 画如此漂亮的插图 ,So easy

人生苦短,快学Python! 今天我们进行一次实战案例分享,以全球预期寿命与人均 GPD数据为例,写一篇 Python 中漂亮散点图的快速指南。除了正常的数据清洗/处理、还会进行简单的统计分析,实现数据处理-统计分析-可视化一条…...

vue-知识点总结

历史 2015年 10月27 1.0.0 Evangelion 新福音战士2016年 10月1日 2.0.0 Ghost in the Shell 攻壳机动队2019年 2月 2.62020年 9月18日 3.0.0 One Piece(海贼王)2021年 8月10日 3.2.0 .sync where 父向子传递props, 需要双向绑定的时候(子组件想更新这个值) how <one-comp…...

Dubbo源码解析-——SPI机制

文章目录一、什么是SPI机制二、Java原生的SPI机制2.1、javaSPI示例2.1.1、编写接口和实现类2.1.2、编写配置文件2.1.3、通过SPI机制加载实现类2.1.4、JAVA SPI 源码解析2.1.4.1、ServiceLoader#load2.1.4.2、ServiceLoader构造方法2.1.4.3、ServiceLoader#reload2.1.4.4、LazyI…...

赛后补题:CF1789C Serval and Toxel‘s Arrays

传送门:CF 题目描述: 题目较长,此处省略 输入: 3 3 2 1 2 3 1 4 2 5 1 1 1 1 1 10 10 4 6 9 12 16 20 2 10 19 7 1 3 5 4 2 17 2 18 6 11 7 1 8 17 5 5 5 5 2 2 输出: 13 1 705比赛的时候感觉已经想到了正解,但是没有想的很清楚,所以赛时没有打出来. 我认为这道题的突破口其…...

Linux学习(8.7)命令与文件的搜寻

目录 命令与文件的搜寻 which 文件档名的搜寻&#xff1a; whereis (寻找特定文件) locate find 以下内容转载自鸟哥的Linux私房菜 命令与文件的搜寻 which 这个命令是根据『PATH』这个环境变量所规范的路径&#xff0c;去搜寻『运行档』的档名&#xff5e; 所以&am…...

Linux下 Makefile文件基本语法二

本文继续上一篇关于 Makefile 文件内容的介绍。上一篇文章如下&#xff1a; Linux下 Makefile 基本语法_凌雪舞的博客-CSDN博客 一. Makefile 上一篇文章介绍了 Makefile基本语法中的变量&#xff0c;模式规则&#xff0c;自动化变量。这里继续介绍 Makefile 的另外一些语…...

【前端】JavaScript构造函数

文章目录概念执行过程返回值原型与constructor继承方式原型链其他继承方式&#xff08;还没写&#xff09;参考概念 在JS中&#xff0c;通过new来实例化对象的函数叫构造函数。实例化对象&#xff0c;也就是初始化一个实例对象。构造函数一般首字母大写。 构造函数的目的&…...

STM32单片机之温湿度检测系统(DTH11、OLED、LCD1602)

LCD1602LCD1602引脚第 1 脚: VSS 为电源地 第 2 脚: VDD 接 5V 正电源 第 3 脚: VL 为液晶显示器对比度调整端,接正电源时对比度最弱&#xff0c;接地时对比度最高&#xff0c;对比度过高时会产生“鬼影”&#xff0c;使用时可以通过一个 10K 的电位器调整对比度。 第 4 脚&…...