首页 前端知识 html实现酷炫好看的个人介绍主页(附源码)

html实现酷炫好看的个人介绍主页(附源码)

2024-05-13 10:05:46 前端知识 前端哥 471 588 我要收藏

文章目录

  • 1.设计来源
    • 1.1 主界面
    • 1.2 我的简介界面
    • 1.3 教育经历界面
    • 1.4 我的源码界面
    • 1.5 我的相册界面
    • 1.6 朋友评价界面
    • 1.7 热门文章界面
    • 1.8 联系我界面
  • 2.效果和源码
    • 2.1 动态效果
    • 2.2 源代码
    • 2.3 代码目录
  • 源码下载

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


html实现酷炫好看的个人介绍主页(附源码) ,简洁个人主页,酷炫个人主页,个人主页源码,适用于PC端和手机端。条理清晰,功能全面,直接改成自己的信息,可以直接部署使用,也可以帮助部署外网访问。也可直接预览效果。

1.设计来源

1.1 主界面

    主界面 ,主要展示自己的图片和文字描述,动态加载自己的职称,可以填写多个,以文字打印的形式一个个展示出来。

//自定义配置职称相关信息
strings: ["一名可爱の程序员","一名全栈工程师", "幽默风趣有理想", "做事认真有责任"],
loop: true,
cursorChar: '|',

请添加图片描述

1.2 我的简介界面

    我的简介界面 ,主要展示自己的图片和文字描述,超链接个人博客和个人网站,灵活配置,还有自己的个人名言。

请添加图片描述

1.3 教育经历界面

    教育经历界面 ,主要展示自己的学校和培训机构的经历,然后自己做过的项目,用文字描述出来,包括名字、时间、主要负责内容。

请添加图片描述

1.4 我的源码界面

    我的源码界面 ,主要展示自己的做过的项目,用名称、描述,超链接,跳转到自己的源码文章,和源码下载页面。

请添加图片描述

1.5 我的相册界面

    我的相册界面 ,主要展示自己平时记录生活,自拍照片,有意义的照片,生活照片,记录自己的点点滴滴。

请添加图片描述

1.6 朋友评价界面

    朋友评价界面面 ,主要展示自己的朋友,对自己的评价,用于提高自我,自我鼓励,与朋友同在,一起努力进步。

请添加图片描述

1.7 热门文章界面

    热门文章界面 ,主要展示自己的热门文章,这里的文章都是自己在CSDN写的,比较火的文章,大家可以看看,非常不错的,可以提升自己的能力。

请添加图片描述

1.8 联系我界面

    联系我界面 ,主要展示自己的联系方式,包括邮箱,地址,电话等信息,也可以把想说的,通过表单提交发送给我。(这里只是模板,没有数据提交操作那一块,如果想弄那一块,可以联系我)。

请添加图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示,此代码兼容性强,可适用于PC端/手机端,可在此代码基础上更加完善功能,支持扩展自己的风格,可以删减内容,打造属于自己的个人介绍主页。

  • 手机端效果

html实现酷炫好看的个人介绍主页(附源码)-手机端

  • PC端效果

html实现酷炫好看的个人介绍主页(附源码)

2.2 源代码

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

<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>清风徐来 の 主页</title>
	<link href="images/favicon.png" rel="icon">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/css/animate.css" rel="stylesheet">
	<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<nav class="nav-area">
	<div class="container">
		<div class="row">
			<div class="col-md-2">
				<a href="#" class="logo">
					<img id="logoImg" src="assets/img/logo.png" style="width: 80px; height: 20px;" alt="logo image">
				</a>
			</div>
			<div class="col-md-10">
				<ul id="main-menu">
					<li><a href="#home">主页</a></li>
					<li><a href="#about">我的简介</a></li>
					<li><a href="#resume">教育经历</a></li>
					<li><a href="#service">我的源码</a></li>
					<li><a href="#work">我的相册</a></li>
					<li><a href="#clients-section">朋友评价</a></li>
					<li><a href="#blog">热门文章</a></li>
					<li><a href="#contact">联系我</a></li>
				</ul>
			</div>
		</div>
	</div>
</nav>
   <header class="header-area header-bg" id="home">
		<div class="header-inner">
				<span>业精于勤荒于嬉,行成于思毁于随</span>
				<h1>我是清风徐来</h1>
				<h6>一名可爱の程序员</h6>
				<div class="scroll-down">
					<span></span>
				</div>
		</div>
   </header>
     <section class="about-area" id="about">
     	<div class="container">
     		<div class="row">
     			<div class="col-md-6">
     				<img src="assets/img/profile-pic.jpg" alt="profile picture">
     			</div>
     			<div class="col-md-6">
     				<div class="section-title inner">
						<h2 style="padding-left: 3rem;">我的简介</h2>
						<p>
							相信自我,磨砺自我,充分自我,展示自我,放飞自我。我有我个性,我由我主宰,我有自己的一片天空。我有我自己创造的未来。加油吧!!!
						</p>
					</div>
     				<ul>
     					<li><strong>名  字 :</strong> 清风徐来</li>
     					<li><strong>年  龄 :</strong> 30</li>
     					<li><strong>地  址 :</strong> 北京市、朝阳区</li>
     					<li><strong>邮  箱 :</strong> test@xcLeigh.com</li>
     					<li><strong>电  话 :</strong> 13311001100</li>
     					<li><strong>籍  贯 :</strong> 湖北、武汉</li>
     					<li><strong>学  历 :</strong> 本科</li>
     					<li><strong>学  校 :</strong> 北京理工大学</li>
     				</ul>
     				<a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="boxed-btn">个人博客</a>
     				<a href="https://blog.csdn.net/weixin_43151418" target="_blank" class="boxed-btn">个人网站</a>
     			</div>
     		</div>
     	</div>
     </section>
    <script src="assets/js/main.js"></script>
</body>
</html>


2.3 代码目录

在这里插入图片描述


源码下载

html实现酷炫好看的个人介绍主页(源码) 点击下载
在这里插入图片描述


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

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

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

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

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


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


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


原文地址:https://blog.csdn.net/weixin_43151418/article/details/131495285(防止抄袭,原文地址不可删除)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8451.html
标签
android
评论
会员中心 联系我 留言建议 回顶部
复制成功!