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

news2024/9/27 12:29:22

一. 前言

文末获取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 , 我完善一点点功能,需要的可以自行下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/371677.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

FL Studio21MAC电脑中文升级版安装图文教程

FL Studio版本有很多,每个版本各有优点。除了最新版本外,还有历史经典版本,用户可以根据自己的需求进行下载,FL Studio21是一款功能十分丰富和强大的音乐编辑软件,能够帮助用户进行编曲、剪辑、录音、混音等操作,让用户能够全面地调整音频,软…

2288hv5超融合服务器 数码管报888

【问题现象】 2288hv5超融合服务器,前面板数码管报888,电源灯黄灯闪烁,开不了机,ibmc网络是通的,但是web网页打不开 【问题原因】 iBMC的版本过低,iBMC在智能诊断数据库保护机制存在异常,导…

【算法笔记】前缀和与差分

第一课前缀和与差分 算法是解决问题的方法与步骤。 在看一个算法是否优秀时,我们一般都要考虑一个算法的时间复杂度和空间复杂度。 现在随着空间越来越大,时间复杂度成为了一个算法的重要指标,那么如何估计一个算法的时间复杂度呢&#xf…

数据库浅谈之共识算法

数据库浅谈之共识算法 HELLO,各位博友好,我是阿呆 🙈🙈🙈 这里是数据库浅谈系列,收录在专栏 DATABASE 中 😜😜😜 本系列阿呆将记录一些数据库领域相关的知识 &#x1…

Linux SELinux讲解

目录 SELinux概念 SELinux配置文件 SELINUX 工作模式 SELINUX TYPE策略类型 配置安全上下文 查看安全上下文 修改安全上下文 修改默认的安全上下文 配置策略规则 查看策略规则 修改策略规则状态 SELinux概念 为什么提出SELinux 之前学习的权限,都是基于用…

深力科电子-MachXO2系列 前所未有的灵活桥接和I/O扩展功能 LCMXO2-256HC-4TG100C FPGA现场可编程门阵列

lattice莱迪斯MachXO2系列超低密度FPGA现场可编程门阵列,适用于低成本的复杂系统控制和视频接口设计开发,满足了通信、计算、工业、消费电子和医疗市场所需的系统控制和接口应用。 瞬时启动,迅速实现控制——启动时间小于1mS,在上…

FreeRTOS信号量

前面介绍过,队列(queue)可以用于传输数据:在任务之间,任务和中断之间。消息队列用于传输多个数据,但是有时候我们只需要传递一个状态,这个状态值需要用一个数值表示,比如&#xff1a…

Android运行时权限Runtime Permission源码分析

Runtime Permission源码跟踪 Android 8.1.0 请求权限时弹窗代码 应用使用requestPermissions申请权限时,系统会弹出一个选择窗口,可进行允许。 源码在packages/apps/PackageInstaller/文件下 GrantPermissionsActivity.java是进行权限分配的弹出窗口…

分布式之PBFT算法

写在前面 在分布式之拜占庭问题 一文中我们分析了拜占庭问题,并一起看了支持拜占庭容错的口信消息性和签名消息性算法,但是这两种算法都有一个非常严重的问题,就是消息数量太多,通信的成本太大,消息数量复杂度为O(n ^…

CentOS 环境 OpneSIPS 3.1 版本安装及使用

文章目录1. OpenSIPS 源码下载2. 工具准备3. 编译安装4. opensips-cli 工具安装5. 启动 OpenSIPS 实例1. OpenSIPS 源码下载 使用以下命令即可下载 OpenSIPS 的源码,笔者下载的是比较稳定的 3.1 版本,读者有兴趣也可前往 官方传送门 sudo git clone htt…

1个串口用1根线实现多机半双工通信+开机控制电路

功能需求: 主机使用一个串口,与两个从机进行双向通信,主机向从机发送数据,从机能够返回数据,由于结构限制,主机与从机之间只有3根线(电源、地、数据线),并且从机上没有设…

【蓝牙mesh】access层(接入层)协议介绍

【蓝牙mesh】access层(接入层)协议介绍 Access层简介 Access层定义了应用层如何使用upper协议层的接口,它不仅定义了应用层的格式,还定义了应用数据在upper层的加密和解密。当收到下层的数据包时,它会检查数据的netke…

Web前端:选择AngularJS进行Web开发的12大理由!

无论你希望构建本地应用程序、渐进式web应用程序(PWA),还是开发单页应用程序,每个企业都寻求具有影响力的数字形象,并希望构建交互式、跨平台和动态的web应用程序,以吸引客户。AngularJS,也称为Angular,是一…

李宏毅2023春季机器学习课程

目录2021&2022课程重磅须知我维护的其他项目更新日志课程地址课程资料直链课程作业直链其他优质课程2021&2022课程 CSDN Github 重磅须知 为方便所有网课资料与优质电子书籍的实时更新维护,创建一个在线实时网盘文件夹;   网盘获取方式&#…

C++进阶——继承

C进阶——继承 1.继承的概念及定义 面向对象三大特性:封装、继承、多态。 概念: 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有类特 性的基础上进行扩展,增加功能,这…

MySql数据库环境部署

MySql基础与Sql数据库概述基础环境的建立MYSQL数据库的连接方法MySql的默认数据库数据库端口号数据库概述 数据库(DataBase,DB)∶存储在磁带、磁盘、光盘或其他外存介质上、按定结构组织在一起的相关数据的集合。数据库管理系统〈DataBase Management S…

SpringMVC常用注释

1.RequestMapping注释:用来匹配客户端发送的请求,可以在方法上使用,也可以在类上使用。方法:表示用来匹配要处理的请求 类上:表示为当前类的所有方法的请求地址添加一个前置路径,访问的时候必须要添加此路径…

一个.Net Core开源缓存中间件,让你更加简单、方便使用缓存

上次给大家推荐过一个缓存中间件《一个C#开发的非常实用的缓存中间件》,今天再给大家推荐一个缓存中间件,两者功能差不多,都是提供统一接口、多级缓存、分布式缓存、支持多种Provider等。 项目简介 这是一个基于.Net Core开发的缓存中间件&…

Java虚拟机之类加载学习总结

文章目录1 什么是类加载1.1 类加载的应用1.2 类加载过程1.3 类的验证1.4 类初始化顺序2 类加载时机3 类加载器3.1 类加载分类3.2 双亲委派3.3 自定义类加载器3.4 类加载器的命名空间4 打破双亲委派4.1 线程上下文类加载器4.2 自定义类加载器5 类的卸载1 什么是类加载 Java 虚拟…

【工具】JSR-303后端参数校验框架的使用方法及说明

【工具】JSR-303后端参数校验框架的使用方法及说明 文章目录【工具】JSR-303后端参数校验框架的使用方法及说明1. 统一校验需求2. 使用说明2.1 引入依赖2.2 规则说明2.3 使用说明2.4 分组校验2.5 定制校验规则注解1. 统一校验需求 有一句话是这样说的——“前端防君子&#xf…