一个好看的用html写的个人简介
发布时间 :
字数:1.1k
阅读 :
今天想帮兄弟写一个个人简介，然后去网上转了一圈，发现了一个比较好看而且简单的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演示代码
css1
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}
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]