当前位置: 首页 > 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 , 我完善一点点功能,需要的可以自行下载

http://www.lryc.cn/news/21220.html

相关文章:

  • 轻量级网络模型ShuffleNet V2
  • 分享美容美发会员管理系统功能的特点_美容美发会员管理系统怎么做
  • Oracle-05-DCL篇
  • tess4j简单使用入门
  • WebGPU学习(4)---使用 UniformBuffer
  • Http客户端Feign-远程调用
  • RK3568镜像的拆包和打包
  • 《设计模式》适配器模式
  • linux 随笔 5-服务管理
  • 【java基础】枚举类(enum)
  • Linux2
  • C语言基础应用(二)数据的转换与输入输出
  • C# 用NPOI读取EXCEL
  • 《高性能MySQL》——MySQL基准测试(笔记)
  • 微服务注册到Nacos后如何读取外网IP
  • 【华为OD机试模拟题】用 C++ 实现 - 匿名信(2023.Q1)
  • nginx配置https域名
  • c语言tips-大端小端存储介绍和使用union判断大小端
  • DevOps落地与转型:提升研发效能的方法与实践
  • 【测试】loadrunner安装
  • 物联网的新应用--触摸物联网
  • 用 Python 画如此漂亮的插图 ,So easy
  • vue-知识点总结
  • Dubbo源码解析-——SPI机制
  • 赛后补题:CF1789C Serval and Toxel‘s Arrays
  • Linux学习(8.7)命令与文件的搜寻
  • Linux下 Makefile文件基本语法二
  • 【前端】JavaScript构造函数
  • STM32单片机之温湿度检测系统(DTH11、OLED、LCD1602)
  • vitepress 就这几步操作,博客就搭好啦?