一个好看的用html写的个人简介

  1. 使用
  2. 把它放进hexo里面
  3. demo预览

今天想帮兄弟写一个个人简介,然后去网上转了一圈,发现了一个比较好看而且简单的html个人简介,然后就想把它记录一下。

源码

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
<style>
body
{
background-image: url(img/背景.jpg);
background-size: cover;
}
div.transbox
{
width: 1050px;
height: 420px;
margin: 90px 90px;
background-color: #ffffff;
border: 1px solid #FFFFFF;
opacity:0.8;
}

h1 {text-align: center;}
h2.ex1 {margin-left:5cm;}
h3.ex1 {margin-left:5cm;}
img.ex1{margin-left:5cm;}
p{text-align: right;}
p.ex1{margin-right: 2cm;}
p{color:mediumpurple}

/*cc:change color*/
a.cc:visited {color:#0000ff;}
a.cc:hover {color:#ffcc00;}
</style>
</head>
<body>
<div class="background">
<div class="transbox">

<h1>个人简介</h1>
<img src="img/头像.jpg" height="50px" width="50px" class="ex1" />
<h2 class="ex1">名字</h2>
<h3 class="ex1">想说的话或者是兴趣爱好,学校</h3>
<h3 class="ex1">想说的话或者是兴趣爱好,学校</h3>
<h3 class="ex1">想说的话或者是兴趣爱好,学校</h3>
<h3 class="ex1">想说的话或者是兴趣爱好,学校</h3>
<p class="ex1">想说的话</p>
</div>
</div>
<embed height="50" width="100" src="bgm/Sunburst.mp3">
</body>
</html>

使用

首先先建一个文件夹,名字随便。然后进入这个文件夹,新建一个html文件(像个人简介.html这样的),然后把上面的代码复制进这个文件里面。然后再在这个文件夹里面新建一个名为img的文件夹,里面需要放两张图片,一张命名为头像.jpg这个是你的头像,一张命名为背景.jpg,然后用edge浏览器打开你刚刚写好的html文件,就可以看到一个属于你的个人简介了。

把它放进hexo里面

当你搞好这个个人简介给你一个朋友看的时候,他可能会说:“欸那你这个只能本地浏览,也没什么用啊,我电脑上又没有,难不成又要弄一个?”

那这个时候,假设你有一个域名和一个hexo的GitHub Pages,那你可以打开hexo根目录下的_config.yml文件,找到skip_render:这行代码按按照下面的格式进行编辑,目的就是告诉hexo让它不要渲染此页面,这样才能正常显示你的个人简介。

1
2
skip_render:
- "个人简介.html"

然后你就可以打开你的GitHub Pages/个人简介.html看到你的个人简介了。

demo预览

用刚刚上面的代码以及方法制作出来的效果(头像是我博客的头像,背景是Windows10壁纸,然后html文件叫个人简介demo.html)

demo演示代码

css
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
<style>
body
{
background-image: url(img/demo背景.jpg);
background-size: cover;
}
div.transbox
{
width: 1050px;
height: 420px;
margin: 90px 90px;
background-color: #ffffff;
border: 1px solid #FFFFFF;
opacity:0.8;
}

h1 {text-align: center;}
h2.ex1 {margin-left:5cm;}
h3.ex1 {margin-left:5cm;}
img.ex1{margin-left:5cm;}
p{text-align: right;}
p.ex1{margin-right: 2cm;}
p{color:mediumpurple}

/*cc:change color*/
a.cc:visited {color:#0000ff;}
a.cc:hover {color:#ffcc00;}
</style>
</head>
<body>
<div class="background">
<div class="transbox">

<h1>个人简介</h1>
<img src="img/demo头像.jpg" height="50px" width="50px" class="ex1" />
<h2 class="ex1">许子晋</h2>
<h3 class="ex1">爱好:编程</h3>
<h3 class="ex1">会什么编程语言:python c c++ html</h3>
<h3 class="ex1">学校:</h3>
<h3 class="ex1">所在地区:广东</h3>
<p class="ex1">想说的话</p>
</div>
</div>
</body>
</html>

注:这个文件一定要用uft-8格式保存,不然会出现乱码。

demo演示:https://xuzijin.com/%E4%B8%AA%E4%BA%BA%E7%AE%80%E4%BB%8Bdemo.html

原文出处:用HTML/CSS制作一个美观的个人简介网页——学习周记1


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 [email protected]

文章标题:一个好看的用html写的个人简介

字数:1.1k

本文作者:许子晋

发布时间:2024-01-30, 16:28:21

最后更新:2025-06-08, 13:09:26

原始链接:https://xuzijin.com/2024/01/30/%E4%B8%80%E4%B8%AA%E5%A5%BD%E7%9C%8B%E7%9A%84%E7%94%A8html%E5%86%99%E7%9A%84%E4%B8%AA%E4%BA%BA%E7%AE%80%E4%BB%8B/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。