菜单 搜索
首页 前端知识 【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码

2024-08-25 23:08:37 前端知识 前端哥 701 813 我要收藏

文章目录

  • 1.设计来源
    • 1.1 主界面
    • 1.2 关于我界面
    • 1.3 我的项目界面
    • 1.4 我的经验界面
    • 1.5 我的技能界面
    • 1.6 我的文章界面
    • 1.7 联系我界面
  • 2.效果和源码
    • 2.1 动态效果
    • 2.2 源代码
  • 源码下载
  • 万套模板，程序开发，在线开发，在线沟通

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/140293771

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码，大作业个人简历源码，大作业个人网站源码，页面内容有首页、关于我、我的项目、我的经验、我的技能、我的文章、联系我等功能块，用到菜单、表单、单选/多选、表格、自适应布局、锚点、轮播图、动画等技术点，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

1.1 主界面

    主界面，该界面左侧是菜单导航，点击三个横杠显示菜单，点击关闭，关闭菜单，点击对应的菜单，跳转到对应的内容。
在这里插入图片描述

    主界面，该界面右侧内容，是采用了轮播图的方式，展示自己喜欢的图片和生活名言，自己根据实际情况应用；

在这里插入图片描述

1.2 关于我界面

    关于我界面，该界面是是采用了图文结合+百分比占用，主要介绍自己相关信息，自己根据实际情况应用；
在这里插入图片描述

1.3 我的项目界面

    我的项目界面，该界面是是采用了单选/多选功能点，瀑布式布局，all代表全部显示，摄影，只显示摄影相关的内容，图文结合，自己根据实际情况应用；

在这里插入图片描述

1.4 我的经验界面

    我的经验界面，该界面是是采用了TAB和图文结合的轮播图，点击四个经验块，会出现每个经验块对应的文字描述，同事评价块是轮播五个同事对我的评价，这里用的是明星举例，自己根据实际情况应用；
在这里插入图片描述

1.5 我的技能界面

    我的技能界面，该界面是是分布式排列，展示了我的三个技能大面和每个技能下的技术点，自己根据实际情况应用；

在这里插入图片描述

1.6 我的文章界面

    我的文章界面，该界面是是图文结合的展示方式，鼠标悬浮出现文章时间、文章名称、文章简介、点击查看文章具体地址和查看更多文章操作，自己根据实际情况应用；

在这里插入图片描述

1.7 联系我界面

    联系我界面，该界面是表单展示和按钮操作，详细介绍联系我的方式和提供地址邮箱等信息，自己根据实际情况应用；

在这里插入图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的个人网站。

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网

2.2 源代码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="徐先生的个人简历、个人主页、个人网站">
<meta name="author" content="徐先生的个人简历、个人主页、个人网站">
<title>徐先生的个人简历、个人主页、个人网站</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
	html,body,h1, h2, h3, h4, h5, h6,span,a,b{font-family: 华文中宋;}
</style>
</head>
 
<body>
<div class="container-fluid nopadding">
	<div class="row nopadding">
		<!-- Header start  -->
		<div class="col-md-1 col-sm-1 col-xs-12 header nopadding text-center">
			<!--     Logo start  -->
			<div class="logo">
				<a href="index.html"><img class="" src="images/logo.png" alt="">
					<h2>简历</h2></a>
			</div>
			<!--     logo end  -->
			<div class="menu_icon" id="mynav">
				<p onclick="openNav()">&#9776;</p>
			</div>
			<!--     sidenav start  -->
			<div id="mySidenav" class="sidenav">
				<div class="sidenav_left">
					<!--     Logo start  -->
					<div class="logo_over hidden-xs">
						<a href="index.html"><img src="images/logo.png" alt="">
							<h2>简历</h2></a>
					</div>
					<!--     Logo end  -->
					<!--   menu start  -->
					<ul id="menu">
						<li data-menuanchor="page1" class="active"><a onclick="closeNav()" href="#page1">首页</a></li>
						<li data-menuanchor="page2"><a onclick="closeNav()" href="#page2">关于我</a></li>
						<li data-menuanchor="page3"><a onclick="closeNav()" href="#page3">我的项目</a></li>
						<li data-menuanchor="page4"><a onclick="closeNav()" href="#page4">我的经验</a></li>
						<li data-menuanchor="page5"><a onclick="closeNav()" href="#page5">我的技能</a></li>
						<li data-menuanchor="page6"><a onclick="closeNav()" href="#page6">我的文章</a></li>
						<li data-menuanchor="page7"><a onclick="closeNav()" href="#page7">联系我</a></li>
					</ul>
					<!--   menu end  -->
					<div class="menu_close">
						<a href="javascript:void(0)" class="closebtn menu_icon" onclick="closeNav()">&times; 关闭</a>
					</div>
				</div>
				<div class="sidenav_right hidden-xs">
					<div class="slogan_over">
						<h3>简历内容</h3>
					</div>
				</div>
			</div>
			<!--     sidenav end  -->
		</div>
		<!-- Header end  -->
		<!-- content start  -->
		<div class="col-md-11 col-sm-11 col-xs-12 content nopadding">
			<!-- Pagepilling start -->
			<div id="pagepiling">
				<!-- Section one area start -->
				<div class="section" id="section1">
					<div id="lionhero" class="owl-carousel owl-theme">
						<div class="item">
							<div class="slide one"></div>
							<div class="welcome-text">
								<p><b>生活</b><br/>就是一个发现美的过程。</p>
								<a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a>
							</div>
						</div>
						<div class="item">
							<div class="slide two"></div>
							<div class="welcome-text">
								<p><b>勤学</b><br/>与其用华丽的外衣装饰自己，不如用知识武装自己。</p>
								<a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a>
							</div>
						</div>
						<div class="item">
							<div class="slide three"></div>
							<div class="welcome-text">
								<p><b>突破</b><br/>在困难面前，唯一的选择就是前进。</p>
								<a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a>
							</div>
						</div>
					</div>
					<!-- more_link start -->
					<div class="more_link">
						<a href="#page2">鼠标向下滚动 <br>
							<i class="fa fa-angle-down"></i>
						</a>
					</div>
					<!-- more_link end -->
				</div>
				<!-- Section one area end -->
				<!-- Section seven area start -->
				<div class="section " id="section7">
					<!-- intro start -->
					<div class="intro contact">
						<div class="container-fluid nopadding">
							<div class="row nopadding ">
								<div class="col-md-12 contact_form">
									<h2>联系我</h2>
									<!-- contact form area start -->
									<div class="col-md-6 col-sm-6 nopadding">
										<form id="contactForm" class="shake" data-toggle="validator">
											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<input id="name" type="text" class="form-control" name="Name" autocomplete="off" placeholder="请输入您的名字" required data-error="请输入您的名字">
														<div class="help-block with-errors"></div>
													</div>
												</div>
												<div class="col-md-12">
													<div class="form-group">
														<input id="email" type="email" class="form-control" name="email" autocomplete="off" placeholder="请输入您的邮箱" required data-error="请输入您的邮箱">
														<div class="help-block with-errors"></div>
													</div>
												</div>
												<div class="col-md-12">
													<div class="form-group">
														<input id="msg_subject" type="text" class="form-control" name="msg_subject" autocomplete="off" placeholder="请输入您的主题" required data-error="请输入您的主题">
														<div class="help-block with-errors"></div>
													</div>
												</div>
											</div>
											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<textarea id="message" class="form-control textarea" rows="3" name="Message" placeholder="请输入您说的内容" required data-error="请输入您说的内容"></textarea>
														<div class="help-block with-errors"></div>
													</div>
												</div>
											</div>
											<div class="row">
												<div class="col-md-12">
													<button id="submit" type="submit" class="btn btn-contact">发送消息</button>
													<div id="msgSubmit" class="h3 text-center hidden"></div>
													<div class="clearfix"></div>
												</div>
											</div>
										</form>
									</div>
									<!-- contact form area end -->
									<!-- office address area start -->
									<div class="col-md-5 col-sm-6 office">
										<div class="office-details">
											<i class="fa fa-map-marker"></i>
											<span>徐先生的个人简历、个人主页、个人网站, <br>北京市,海淀区.</span>
										</div>
										<div class="office-details">
											<i class="fa fa-phone"></i>
											<span>+133 1100 1100, +133 1100 1100</span>
										</div>
										<div class="office-details">
											<i class="fa fa-envelope"></i>
											<span>test@126.com</span>
										</div>
									</div>
									<!-- office address area end -->
									<!-- social icon start -->
									<div class="col-md-1 col-sm-12 social_icon text-right">
										<ul class="member-social">
											<li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-weixin"></i></a></li>
											<li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-qq"></i></a></li>
											<li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-weibo"></i></a></li>
											<li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-linkedin"></i></a></li>
											<li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-facebook"></i></a></li>
										</ul>
									</div>
									<!-- social icon end -->
								</div>
							</div>
						</div>
						<div class="footer">
							<p>Copyright &copy; 2024.Company name All rights reserved.<a href="https://blog.csdn.net/weixin_43151418" target="_blank">xcLeigh</a> | 
								<a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a></p>
						</div>
					</div>
					<!-- intro end -->
				</div>
				<!-- Section seven area end -->
			</div>
			<!-- Pagepiling end -->
		</div>
		<!-- content end -->
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
 
</html>
 
 
复制

源码下载

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码（源码） 点击下载
在这里插入图片描述

万套模板，程序开发，在线开发，在线沟通

  • 专业后端大佬在线沟通需求开发
  • 专业前端大佬在线沟通需求开发
  • 专业网站整套大佬在线沟通需求开发
  • 专业毕业设计大佬在线沟通需求开发
  • 专业大作业大佬在线沟通需求开发
  • 【优惠活动】专属定制，程序在线开发
--------------- 业精于勤，荒于嬉 ---------------
 

请添加图片描述

--------------- 行成于思，毁于随 ---------------

     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/140293771（防止抄袭，原文地址不可删除）

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16940.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！