【HTML】极简个人主页设计效果图源代码

74 阅读 0 评论 49 点赞

我是靠谱客的博主义气镜子，这篇文章主要介绍【HTML】极简个人主页设计效果图源代码，现在分享给大家，希望可以做个参考。

基于HTML的极简个人主页设计

效果图
源代码

效果图

在这里插入图片描述

源代码

主入口

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
   
    <frameset cols="250,*">
    
    <frame src="导航.html">
    <frame src="哈利的简介.html" name="showframe">
    
    </frameset>
    
</html>

导航

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>

<body>

<a href="哈利的简介.html" target="showframe">个人简介</a><br/>

<a href="未来规划.html" target="showframe"> 未来规划</a><br>
<a href="我的相册.html" target="showframe">爱好:摄影作品展示</a><br>
<a href="https://blog.csdn.net/wei2019_?spm=1011.2124.3001.5343" target="showframe">个人博客</a><br>

</body>
</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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2020-12-25</title>
  <link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>

<body class="stackedit" background = "背景图2.jpg">
<embed src="未来.mp3" hidden="true" autostart="true" loop="true">
  <div class="stackedit__html"><h1><a id="_0"></a><strong>个人的基本情况</strong></h1>
<ul>
<img src = "我的照片.jpg" width="180" height="230" align = "right">
<li>姓名：小哈利</li>
<li>学院：格兰芬多</li>
<li>爱好： 学习人类的计算机算法  魁地奇球  </li>
<li>我的博客：<a href="https://blog.csdn.net/wei2019_?spm=1011.2124.3001.5343">一杭6174</a></li>
</ul>
  <br>
<h1><a id="_9"></a><strong>教育经历</strong></h1>
<p> 霍格沃茨魔法学院 2019级<br>
<br></p>
<h1><a id="_14"></a><strong>兴趣爱好</strong></h1>
<ul>
<li>算法</li>
<li>运动</li>
<li>魁地奇球</li>
</ul>
</div>
</body>

</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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2020-12-25</title>
  <link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>

<body class="stackedit" background="背景图2.jpg">
  <div class="stackedit__html"><h1><a id="2020__2021__0"></a>2020 - 2021 个人规划</h1>
<ul>
<li>学会幻影移形 这样就可以在早点到食堂吃饭了！ 500 h+</li>
<li>国际魁地奇球魔法竞赛 金牌</li>
<li>背过中级魔法师手册的全部咒语！</li>
<li>搞懂人类的算法</li>
<li>打败伏地魔</li>
</ul>
<h1><a id="2021__2022__8"></a>2021 - 2022 个人规划</h1>
<ul>
<li>争取去南方上学，人类世界的北方太冷了 哭</li>
</ul>
</div>
</body>

</html>

相册

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的相册</title>
		<embed src="" hidden="true" autostart="true" loop="true">
	</head>
	<body>
	<p>
	<img src="004.jpg"> <img src="002.jpg"  >  <img src="0001.jpg"  alt=“02” > 
	<br>
	<img border="0" src="back.jpg"  align="right" width="70" height="40">
	</a>
	</p>
	</body>
</html>