HTML5实现好看的有意思的个人简历网页源码

原创

xcLeigh

修改于 2025-03-20 15:38:42

11400

代码可运行

文章被收录于专栏：前端源码分享前端源码分享

运行总次数：0

代码可运行

HTML5实现好看的有意思的个人简历网页源码，个人简历网页源码，个人主页源码，HTML简历源码，HTML主页源码。主要通过个人主页、个人信息、个人相册、个人项目、与我交流等模块页面来讲述个人信息，内容图文结合，酷炫动态，简洁舒适。兼容手机端，页面干净整洁，内容丰富，可以扩展自己想要的，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。

一、设计来源

1.1 主界面

个人简历主界面，头部导航菜单，通过个人主页、个人信息、个人相册、个人项目、与我交流等模块相关方面介绍，页面干净整洁，内容丰富，利用整体布局，可以扩展自己想要的。

1.2 个人信息界面

个人简历个人信息界面，头部导航菜单，通过个人主页、个人信息、个人相册、个人项目、与我交流等模块相关方面介绍，页面干净整洁，内容丰富，利用整体布局，可以扩展自己想要的。

1.3 个人相册界面

个人简历个人相册界面，头部导航菜单，通过个人主页、个人信息、个人相册、个人项目、与我交流等模块相关方面介绍，页面干净整洁，内容丰富，利用整体布局，可以扩展自己想要的。

1.4 个人项目界面

个人简历个人项目界面，头部导航菜单，通过个人主页、个人信息、个人相册、个人项目、与我交流等模块相关方面介绍，页面干净整洁，内容丰富，利用整体布局，可以扩展自己想要的。

1.5 与我交流界面

个人简历与我交流界面，头部导航菜单，通过个人主页、个人信息、个人相册、个人项目、与我交流等模块相关方面介绍，页面干净整洁，内容丰富，利用整体布局，可以扩展自己想要的。

二、效果和源码

2.1 源代码

这里是主界面的代码，其他图片、js、css等代码。需要完整的代码联系博主，如有其他技术问题，请私信博主，博主看到后第一时间回复。

<!--各行各业的模板源码，来自CSDN上的xcLeigh博客：https://blog.csdn.net/weixin_43151418/article/details/128349160-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>许七安 - 个人简历网页</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<!-- Main Style -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!-- PrettyPhoto -->
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
<!-- Fancybox -->
<link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen">

</head>
<body class="index page-index">
<!-- START MOBILE NAVIGATION -->
<nav id="mobile-nav">
	<a href="welcome.html">个人主页</a>
	<a href="about.html">个人信息</a>
	<a href="portfolio.html">个人相册</a>
	<a href="team.html">个人项目</a>
	<a href="talk.html">与我交流</a>       
</nav>
<!-- END MOBILE NAVIGATION -->
<div id="site-holder">
	<div id="flip" class="container" data-attr-page="0">
		<!-- START WELCOME SECTION -->
		<div class="f-page yellow-bkg active" id="screen-welcome">
			<div id="debugger">
			</div>
			<!-- PRELOADER -->
			<div id="content-loader-holder">
				<div id="content-loader">
					<div class="ss-preloader-spin">
					</div>
				</div>
			</div>
			<!-- END PRELOADER -->
			<div class="g-screen fixed-screen">
				<!-- START HEADER -->
				<header class="site-header yellow">
					<span class="nav-trigger">
						<span class="nav-trigger-inside">
						<span class="nav-trigger-line"></span>
					</span>
				</span>
			<!-- START NAVIGATION MENU -->
			<nav class="site-menu">
				<a href="welcome.html" class="active">个人主页</a>
				<a href="about.html">个人信息</a>
				<a href="portfolio.html">个人相册</a>
				<a href="team.html">个人项目</a>
				<a href="talk.html">与我交流</a>                                              
			</nav>
			<!-- END NAVIGATION MENU -->
			<!-- START SOCIAL ICON -->
			<nav class="social-bar">                   
				<a title="这里放自定义超链接" href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank" class="social-link">
					<i class="fa fa-coffee"></i>
				</a>
				<a title="这里放自定义超链接" href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank" class="social-link">
					<i class="fa fa-anchor"></i>
				</a>
				<a title="这里放自定义超链接" href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank" class="social-link">
					<i class="fa fa-weibo"></i>
				</a>
				 <a title="这里放自定义超链接" href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank" class="social-link">
					<i class="fa fa-link"></i>
				</a>
				 <a title="这里放自定义超链接" href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank" class="social-link">
					<i class="fa fa-linkedin"></i>
				</a>
				 <a title="这里放自定义超链接" href="https://blog.csdn.net/weixin_43151418/article/details/128349160" target="_blank" class="social-link">
					<i class="fa fa-android"></i>
				</a>
			</nav>
			<!-- END SOCIAL ICON -->
		</header>
				<!-- END HEADER -->
				<!-- START LOGO -->
				<div class="main-logo">
					<div class="main-logo-shadow">
					</div>
					<div class="logo-img">
					</div>
					<a href="about.html"><span class="logo-arrow"></span></a>
				</div>
				<!-- END LOGO -->
				<!-- START FLUBBER -->
				<div class="flubber">
					<div id="flubber" class="flubber-guy">
						<div class="flubber-eyes">
						</div>
					</div>
					<ul class="flubber-quote">
						<li>你好，欢迎光临！</li>
						<li>这是我的个人网页！</li>
						<li>欢迎大家一起交流学习！</li>
					</ul>
				</div>
				<!-- END FLUBBER -->
				<div class="main-quote">
					╠  雄鸡不鸣则已，一鸣惊人；雄鹰不飞则已，一飞冲天。 ╣</div>
			</div>
		</div>
		<!-- END WELCOME SECTION -->
	</div>
</div>
<!-- JS Plugin -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/mobicom.custom.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

亲爱的朋友，无论前路如何漫长与崎岖，都请怀揣梦想的火种，因为在生活的广袤星空中，总有一颗属于你的璀璨星辰在熠熠生辉，静候你抵达。

愿你在这纷繁世间，能时常收获微小而确定的幸福，如春日微风轻拂面庞，所有的疲惫与烦恼都能被温柔以待，内心永远充盈着安宁与慰藉。

至此，文章已至尾声，而您的故事仍在续写，不知您对文中所叙有何独特见解？期待您在心中与我对话，开启思想的新交流。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

html

登录后参与评论

0 条评论

热度