【博主推荐】HTML5实现简洁的实用的个人网站、个人主页七个页面源码

news2024/9/21 22:57:00

文章目录

  • 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/140610058

HTML5实现简洁的实用的个人网站、个人主页七个页面源码，个人网站源码，个人主页源码，个人介绍源码，个人简历源码，内置七个页面有个人主页；关于我；我的技能；我的经验；我的教育；我的项目；联系我七个页面。包含各种页面标签，通用性强，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

1.1 个人主页界面

        个人主页界面效果图，头部底部色调统一，整体风格一致，图文结合的方式介绍自己，相关链接跳转，相关信息展示，图文结合的方式展现。具体动态效果见下面的视频演示。

主页菜单效果

在这里插入图片描述

主页完整效果

在这里插入图片描述

1.2 关于我界面

        关于我界面效果图，头部底部色调统一，整体风格一致，图文结合的方式介绍自己，相关链接跳转，相关信息展示，图文结合的方式展现。具体动态效果见下面的视频演示。

在这里插入图片描述

1.3 我的技能界面

        我的技能界面效果图，头部底部色调统一，整体风格一致，我的技能以文字描述自己的技能和图表方式演示熟练度，图文结合的方式描述自己的代码量，项目数等。具体动态效果见下面的视频演示。

在这里插入图片描述

1.4 我的经验界面

        我的经验界面效果图，头部底部色调统一，整体风格一致，我的经验是以列表的形式，展示自己的项目经验，带有鼠标经过放大效果。具体动态效果见下面的视频演示。

在这里插入图片描述

1.5 我的教育界面

        我的教育界面效果图，头部底部色调统一，整体风格一致，我的教育是以列表的形式，展示自己的教育经历，带有鼠标经过放大效果。具体动态效果见下面的视频演示。

在这里插入图片描述

1.6 我的项目界面

        我的项目界面效果图，头部底部色调统一，整体风格一致，我的项目内容是图文演示，支持点击图片放大，可以浏览，带鼠标悬浮效果。具体动态效果见下面的视频演示。

在这里插入图片描述

单击图片放大

在这里插入图片描述

1.7 联系我界面

        联系我界面效果图，头部底部色调统一，整体风格一致，联系我左侧是直接发消息的表单，右侧是相关联系方式展示。具体动态效果见下面的视频演示。

在这里插入图片描述

2.效果和源码

2.1 动态效果

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

HTML5实现简洁的实用的个人网站、个人主页七个页面源码

2.2 源代码

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>好看的个人网站</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="好看的个人网站" />
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">   
<link href="css/font-awesome.css" rel="stylesheet"> <!-- font-awesome icons --> 
<script src="js/jquery-2.2.3.min.js"></script>  
</head>
<body> 
	<!-- banner -->
	<div class="banner">
		<div class="banner-w3lsinfo"> 
			<!-- header -->
			<div class="header">
				<div class="container">
					<div class="logo">
						<h1><a href="index.html">刘亦菲</a></h1>
					</div> 
					<div class="menu">
						<a href="#" class="navicon"></a> 
						<div class="toggle effect-3"> 
							<ul class="toggle-menu">
								<li><a href="index.html" class="active"> 个人主页</a></li>
								<li><a href="about.html"> 关于我</a></li>  
								<li><a href="skills.html"> 我的技能</a></li>
								<li><a href="experience.html">我的经验</a></li> 
								<li><a href="education.html">我的教育</a></li>
								<li><a href="projects.html"> 我的项目</a></li>							
								<li><a href="contact.html"> 联系我</a></li>
							</ul>
						</div> 
					</div>   
					<div class="social-w3licon">
						<a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="social-button twitter"><i class="fa fa-qq"></i></a>
						<a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="social-button facebook"><i class="fa fa-weixin"></i></a> 
						<a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="social-button google"><i class="fa fa-weibo"></i></a> 
						<a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="social-button dribbble"><i class="fa fa-paw"></i></a> 
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<!-- //header --> 
			<!-- banner-text -->
			<div class="banner-text"> 
				<div class="container"> 
					<div class="banner-w3lstext"> 
						<h2>刘亦菲<span>我是一个软件工程师</span></h2>
						<p>脚踏实地山让路，持之以恒海可移，相信自我，磨砺自我，充实自我</p>
					</div> 
				</div>
			</div>
			<!-- //banner-text -->
			<div class="w3agile-address"> 
				<div class="container"> 
					<ul>
						<li><i class="fa fa-map-marker" aria-hidden="true"></i>北京市、海淀区</li>
						<li><i class="fa fa-phone" aria-hidden="true"> </i>  + 133 1100 1100</li>
						<li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:test@126.com"> test@126.com</a></li>
					</ul>
				</div> 
			</div> 
		</div>
	</div>
	<div class="w3agile-footer">
		<div class="container"> 
			<p>Copyright &copy; 2024.个人网站 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>
    <script src="js/bootstrap.js"></script>
</body>
</html>

源码下载

HTML5实现简洁的实用的个人网站、个人主页七个页面源码（源码） 点击下载
在这里插入图片描述

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

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

请添加图片描述

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

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

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

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

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

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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1940965.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【MQTT（2）】开发一个客户端，ubuntu版本

【MQTT（2）】开发一个客户端，ubuntu版本

基本流程如下&#xff0c;先生成Mosquitto的库&#xff0c;然后qt调用库进行开发界面。 文章目录 0 生成库1 有界面的QT版本2 无界面版本 0 生成库 下载源码&#xff1a;https://github.com/eclipse/mosquitto.git 编译ubuntu 版本很简单&#xff0c;安装官方说明直接make&am…
阅读更多...
1分钟带你了解等保测评流程

1分钟带你了解等保测评流程

常言道&#xff1a;“安全无小事&#xff0c;防患于未然。” 在信息化高速发展的今天&#xff0c;网络安全已成为国家安全的重要组成部分&#xff0c;等级保护&#xff08;简称“等保”&#xff09;测评作为网络安全防护的重要手段&#xff0c;对于确保信息系统安全、稳定运行…
阅读更多...
总台数430！2023年度各省燃机台数及装机容量一览

总台数430！2023年度各省燃机台数及装机容量一览

重型燃气轮机发电作为清洁能源战略的核心&#xff0c;将持续被强化以推动“双碳”目标的达成。鉴于其高度复杂的设计与制造流程&#xff0c;它成为了国家高端制造水平的象征。近年来&#xff0c;在科技强国战略的推动下&#xff0c;我国重型燃气轮机行业正迈向自主研发、创新突…
阅读更多...
Elasticsearch基础（五）：使用Kibana Discover探索数据

Elasticsearch基础（五）：使用Kibana Discover探索数据

文章目录 使用Kibana Discover探索数据 一、添加样例数据 二、数据筛选 三、保存搜索 使用Kibana Discover探索数据 一、添加样例数据 登录Kibana。在Kibana主页的通过添加集成开始使用区域&#xff0c;单击试用样例数据。 在更多添加数据的方式页面下方&#xff0c;单击…
阅读更多...
AJAX复习总结

AJAX复习总结

AJAX复习总结 AJAX即“Asynchronous JavaScript and XML”&#xff08;异步的JavaScript与XML技术&#xff09;,是一种在无需重新加载整个网页的情况下&#xff0c;能够更新部分网页的技术。简单来说&#xff0c;AJAX就是让网页变得更快、更灵活的一种方法 举个例子&#xff1a…
阅读更多...
昇思25天学习打卡营第4天 | 网络构建

昇思25天学习打卡营第4天 | 网络构建

在学习和实践MindSpore神经网络模型构建的过程中&#xff0c;我深刻理解了MindSpore中如何通过nn.Cell类来构建和管理复杂的神经网络模型。通过这次的实践&#xff0c;我对神经网络的基本构建和应用有了更加全面的认识&#xff0c;以下是我学习过程中所总结的几点心得&#xff…
阅读更多...
一行Python代码实现数据清洗的18种方法

一行Python代码实现数据清洗的18种方法

目录 1. 去除字符串两边空格 2. 转换数据类型 3. 大小写转换 4. 移除列表中的重复元素 5. 快速统计元素出现次数 6. 字符串分割成列表 7. 列表合并 8. 数据填充 9. 提取日期时间 10. 字符串替换 11. 快速排序 12. 提取数字 13. 空值处理&#xff08;假设是列表&am…
阅读更多...
powe bi界面认识及矩阵表基本操作 - 1

powe bi界面认识及矩阵表基本操作 - 1

powe bi界面认识及矩阵表操作 1. 界面认识1.1 选择数据源1.2 选择相关表及点击加载1.3 表字段显示位置1.4 表属性按钮位置1.5 界面布局按钮认识 2. 矩阵表基本操作2.1 选择矩阵表2.2 创建矩阵表2.3 设置字体大小2.4 行填充&#xff1a;修改高度2.5 列宽&#xff1a;设置列的宽度…
阅读更多...
内置华为视频终端API接口的中央控制系统

内置华为视频终端API接口的中央控制系统

内置华为视频终端API接口的中控系统是一种高度集成化的智能控制系统&#xff0c;它通过将华为视频终端的控制功能集成到中控系统中&#xff0c;实现了对华为视频终端的远程控制和集中管理。以下是对该系统的详细介绍&#xff1a; 一、系统概述 该系统通过调用华为视频终端提供…
阅读更多...
自建网站统计工具 Umami 替代 Google Analytics

自建网站统计工具 Umami 替代 Google Analytics

本文首发于只抄博客，欢迎点击原文链接了解更多内容。 前言 Umami 是一款开源的网站统计工具，与 Google Analytics 相比更加的轻量，且不会收集网站用户的个人信息。同时，Umami 的仪表盘界面简洁，UI 精美，方便我们查看网站的历史统计数据。 Umami 使用方式也与 Google Ana…
阅读更多...
2024 微信小程序 学习笔记 第二天

2024 微信小程序 学习笔记 第二天

1. WXML 模板语法 数据绑定 事件绑定 条件渲染 列表渲染 2. WXSS 模板样式 rpx 样式导入 全局和局部样式 3. 全局配置 window tabBar 配置tabBar案例 4. 网络数据请求 Get请求 Post 请求 加载时请求 5. 案例 -本地生活&#xff08;首页&#xff09; 导航栏 轮播图 九宫格效果…
阅读更多...
MySQL命令大全：以后再也不用担心忘记SQL该怎么写啦~

MySQL命令大全：以后再也不用担心忘记SQL该怎么写啦~

一、基础操作与库命令 首先来介绍一些关于MySQL基础操作的命令&#xff0c;以及操作数据库相关的命令&#xff0c;MySQL中的所有命令默认是以;分好结尾的&#xff0c;因此在执行时一定要记得带上分号&#xff0c;否则MySQL会认为你这条命令还未结束&#xff0c;会继续等待你的…
阅读更多...
mathtype7.4.4产品密钥mathtype7.4破解版mathtype 7.4.10密钥

mathtype7.4.4产品密钥mathtype7.4破解版mathtype 7.4.10密钥

“在数学中&#xff0c;符号是重要的。” 这是著名数学家陈省身的名言。对于很多科研人员来说&#xff0c;他们常常需要使用到各种复杂的公式和符号来描述他们的研究工作。然而&#xff0c;很多时候&#xff0c;这些公式和符号并不能很好地在文档或者网页上显示出来。 MathTyp…
阅读更多...
【论文共读】【翻译】ShuffleNet v1：一种用于移动设备的极其高效的卷积神经网络

【论文共读】【翻译】ShuffleNet v1：一种用于移动设备的极其高效的卷积神经网络

[原文地址] https://arxiv.org/pdf/1707.01083 [翻译] 0. 摘要 我们介绍了一种计算效率极高的CNN架构&#xff0c;称为ShuffleNet&#xff0c;该架构专为计算能力非常有限的移动设备&#xff08;例如&#xff0c;10-150 MFLOPs&#xff09;而设计。新架构利用了两个新操作&am…
阅读更多...
Fastjson解析JSON时key对应的value存在多个英文双引号解决

Fastjson解析JSON时key对应的value存在多个英文双引号解决

情景 如上图所示&#xff0c;经常在解析json时会出现因双引号报错的问题。 fastjson解决方案 JSONObject jsonfile JSONObject.parseObject(json, Feature.OrderedField);JSONArray jsonArray jsonfile.getJSONObject("result").getJSONArray("items");…
阅读更多...
c++最小生成树实现

c++最小生成树实现

文章目录 参考文章目的c实现 参考文章 点击访问 目的 实现参考文章中的图结构&#xff0c;并计算它的最小生成树 c实现 #include<iostream> #include<vector> #include<map>class Node { public:Node(const int val) :value(val) {}int value;std::map&…
阅读更多...
Ubuntu 查询未更新的包 进行手动更新

Ubuntu 查询未更新的包 进行手动更新

lsb_release -a 查询ubuntu的版本号&#xff0c;我这边是20.04 apt list --upgradable 查询未更新的包 sudo apt --only-upgrade install php/focal 中间遇到输入选择&#xff0c;输入y即可
阅读更多...
SpringBoot常用功能实现

SpringBoot常用功能实现

1. 配置文件多环境配置 1.1 创建不同环境配置文件 文件名前缀和后缀为标准固定格式&#xff0c;不可以改变。 1.2 pom中加入文件配置 可以使用<activation>标签设置默认环境。 <profiles><profile><id>dev</id><activation><active…
阅读更多...
yolov5进行识别安全帽

yolov5进行识别安全帽

进行毕业设计 下载yolov5使用按照教程来进行就行注意事项&#xff08;有必要看看&#xff09;效果 总结 下载yolov5 地址是&#xff1a;https://github.com/ultralytics/yolov5 使用按照教程来进行就行 这里简单说一下&#xff1a; 下载需要的命令&#xff1a; pip install -…
阅读更多...
【人工智能】AI绘画工具介绍

【人工智能】AI绘画工具介绍

目录 引言 热门AI绘画工具 1. DeepArt 2. Artbreeder 3. DALLE 4. Deep Dream Generator 5. Midjourney 使用AI绘画工具的优势 知识扩展 1. 生成对抗网络&#xff08;GANs&#xff09; 2. 变分自编码器&#xff08;VAEs&#xff09; 3. 扩散模型&#xff08;Diffus…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023