html实现酷炫好看的个人介绍主页(附源码)
文章目录
- 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实现酷炫好看的个人介绍主页(源码) 点击下载
html实现酷炫好看的个人介绍主页(附源码)相关推荐
- 六边形酷炫科技跟随鼠标动态特效网站源码 可做网页背景
介绍: 基于canvas画布绘制多个六边形追踪鼠标,科技感的几何图形酷炫动画特效,单页hrml源码,可做网站动态背景 网盘下载地址: https://zijiewangpan.com/5Sr9m8uV ...
- 直播App中Android酷炫礼物动画如何通过直播程序源码实现方案
直播App中Android酷炫礼物动画如何通过直播程序源码实现方案 这个动画,如果输出成GIF的话,要3MB,尺寸是750*750.在上一篇文章中已经介绍过几种被否掉的方法,这里再稍作补充说明,如果使 ...
- html多个好看的背景动态效果(附源码)
文章目录 1.设计来源 1.1 图片轮动背景 1.2 星空流星背景 1.3 动态美女背景 1.4 动态屋雨背景 1.5 动态街道背景 1.6 动态夜幕背景 2.效果和源码 2.1 动态效果 2.2 透 ...
- html实现好看的导航主页(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 底部导航 1.3 屏幕保护 2.效果和源码 2.1 动态效果 2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csd ...
- 九款酷炫基于jquery实现的应用及源码
1.HTML5 Loading动画加载 五彩的圆环Loading 今天我们要分享一款基于HTML5的Loading加载动画特效,这款HTML5加载动画是一个五彩的圆环,圆环不停地转动从而体现加载正在进 ...
- Java爬虫系列之实战:爬取酷狗音乐网 TOP500 的歌曲(附源码)
在前面分享的两篇随笔中分别介绍了HttpClient和Jsoup以及简单的代码案例: Java爬虫系列二:使用HttpClient抓取页面HTML Java爬虫系列三:使用Jsoup解析HTML 今天 ...
- 【C语言】游戏开发:天天酷跑丨完美练手项目 [附源码]
目录 一.项目说明: 二.项目作用 三.项目技术要求 四.库.宏.主函数说明 五.项目实现 5.1游戏背景的实现 5.2实现Hero奔跑 5.3 实现Hero跳跃 5.4 优化帧等待 5.6使用结构体 ...
- 【博主推荐】html好看的音乐播放器(附源码)
html好看的音乐播放器 文章目录 1.主界面列表效果 2.主界面详情效果 3.背景风格1-背景色轮动 4.背景风格2-图片轮动 5.MP3免费下载 5.1 MyFreeMP3 5.2.铜钟音乐 源码 ...
- 【博主推荐】html好看的拼图小游戏(附源码)
拼图目录 html好看的拼图小游戏 1.拼图效果示意图 1.1 第一级 九宫格拼图 1.2 第二级 十六宫格拼图 1.3 第三级 三十二宫格拼图 14 第三级 八十一宫格拼图 2.图片切图说明 3.实 ...
最新文章
- 【图论专题】有向图的强连通分量
- SQLServer Date
- Java黑皮书课后题第5章:**5.21(金融应用:比较不同利率下的贷款)编写程序,让用户输入输入贷款总额和以年为单位的贷款期限,然后显示利率从5%到8%每次递增1/8的各种利率下,每月支付额和总支付
- Java—BIO模型
- 一看就懂的例子告诉你用react-redux的正确姿势
- CAN笔记(16) CANOpen简介
- 关系抽取之远程监督算法:别再跟我提知识图谱(上篇)
- Java多线程总结之线程安全队列Queue
- CSDN下载免费获取积分
- 作为面试官准备提问的问题及其答案
- 如何用最简单的方法创建一个超好用的微信公众号页面模板?
- linux下没有yum命令,linux下配置yum的三种方法与yum命令详解
- XV6源代码阅读-虚拟内存管理
- 像《我是歌手》一样说我是程序员
- Chrome浏览器使用谷歌翻译插件的正确方法
- 问题:SQL Server数据库不允许更改
- 【PHP框架 | Laravel8 系列3】 - 路由
- 十进制快速转换为二进制
- 一周热图|“惊鸿仙子”俞飞鸿代言日本高端美容仪品牌雅萌;“姐圈顶流”刘敏涛携手良品铺子总裁直播带货...
- 分布式存储能成为存储市场增长的主要驱动力