当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
text.html 24.02 KB
一键复制 编辑 原始数据 按行查看 历史
luojaye 提交于 2019-04-27 23:41 . 新建一个测试的html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>[简历]罗嘉怡-网络与新媒体学生/广州</title>
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="assets/css/typo.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/index.css">
<script>
function loading() {
document.getElementsByClassName('fa-user')[0].style.display = 'block';
document.getElementsByClassName('loading')[0].style.display = 'none';
}
</script>
<style type="text/css">
body {
background-color: #FFC0CB;
}
</style>
<style>
@keyframes movingheart{
0% {width:100px; height:100px; left:0px; top:0px;opacity:0.2}
25% {width:200px; height:200px; left:100px; top:100px;opacity:0.4; transform: rotate(30deg);}
75% {width:100px; height:100px; left:300px; top:0px;opacity:0.8;transform:rotate(60deg);}
100% {width:100px; height:100px; left:0px; top:0px;opacity:0.2;transform: rotate(0deg);}
}
svg.movingheart{
position:absolute;
width:100px;
height:100px;
animation-name:movingheart;
animation-duration:6s;
animation-iteration-count:infinite;
animation-direction: normal;
}
svg.delay1{
animation-delay: 2s;
}
svg.delay2{
animation-delay: 4s;
}
</style>
<style>
.Scroll_Wrapper {
width: 100%;
white-space: nowrap; /* 为了把所有内容都保持在一行 */
overflow-x: auto; /* 如果溢出框,则应该提供滚动机制 */
overflow-y: hidden; /* 裁剪内容 - 不提供滚动机制 */
}
.Item {
display: inline-flex;
/* border: solid aqua; */
/* position: relative; */
}
.Item img {
max-height: 7.25rem;
}
.Caption {
max-width: 4rem;
padding-left: .5rem;
font-size: 1rem;
line-height: 1.2;
/* border: solid red; */
white-space: normal;
}
</style>
</head>
<body>
<header class="header"></header>
<article class="container">
<section class="side" id="side">
<!-- 左栏固定开关,记得及时删除这段代码 Start-->
<label class="switch" style="display: none;" onchange="switchFixed()">
<script type="text/javaScript">
function switchFixed(){
var value = document.getElementById('side').style.position === 'fixed' ? 'absolute' : 'fixed';
document.getElementById('side').style.position = value;
}
</script>
<input id="cb" type="checkbox">
<span class="slider round"></span>
</label>
<style>
@media (min-width: 414px){
.switch{position:relative;display:inline-block!important;width:60px;height:34px;}
.switch input{display:none;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;}
.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s;}
input:checked + .slider{background-color:#1abc9c;}
input:focus + .slider{box-shadow:0 0 1px #1abc9c;}
input:checked + .slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px);}.slider.round{border-radius:34px;}
.slider.round:before{border-radius:50%;}
}
</style>
<!-- 左侧固定开关,记得及时删除这段代码 End-->
<style>
body {
background-image: url(assets/images/草莓背景图.jpg);
}
</style>
<!-- 个人肖像 -->
<section class="me">
<section class="portrait">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 头像照片 -->
<img class="fa-user" src="assets/images/user.jpg" onload="loading()">
</section>
<section class="svg info-unit">
<h2><i class="fa fa-heart" aria-hidden="true"></i>give you my heart</h2>
<hr/>
<svg class="movingheart" viewBox="0 0 800 800">
<path fill="red" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256
96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9
207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1
53-154.3-9.8-207.9z">
</path>
</svg>
<svg class="movingheart delay1" viewBox="0 0 800 800">
<path fill="red" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256
96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9
207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1
53-154.3-9.8-207.9z">
</path>
</svg>
<svg class="movingheart delay2" viewBox="0 0 800 800">
<path fill="red" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256
96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9
207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1
53-154.3-9.8-207.9z">
</path>
</svg>
</section>
<h1 class="name">罗嘉怡</h1>
<h4 class="info-job">网络新媒体学生 / 广州</h4>
</section>
<!-- 基本信息 -->
<section class="profile info-unit">
<h2>
<i class="fa fa-user" aria-hidden="true"></i>我的基本信息</h2>
<hr/>
<ul>
<li>
<label>个人信息</label>
<span>罗嘉怡 / 女 / 18岁</span>
</li>
<li>
<label>英语水平</label>
<span>即将CET-6</span>
</li>
<li>
<label>计算机水平</label>
<span>即将二级</span>
</li>
<li>
<label>个人兴趣爱好</label>
<span>跳舞 唱歌 跑步 旅游</span>
<img class="fa-dance" src="assets/images/dance.jpg" style="width: 20%;" alt="">
<img class="fa-sing" src="assets/images/sing.jpg" style="width: 20%;" alt="">
<img class="fa-run" src="assets/images/run.jpg" style="width: 20%;" alt="">
<img class="fa-travel" src="assets/images/travel.jpg" style="width: 20%;" alt="">
</li>
</ul>
</section>
<!-- 联系方式 -->
<section class="contact info-unit">
<h2>
<i class="fa fa-phone" aria-hidden="true"></i>联系方式</h2>
<hr/>
<ul>
<li>
<label>手机 <i class="fa fa-phone " aria-hidden="true"></i></label>
<a href="tel:15168285219" target="_blank">18033375496</a>
</li>
<li>
<label>邮箱 <i class="fa fa-envelope " aria-hidden="true"></i></label>
<a href="mailto:604414910@qq.com" target="_blank">604414910@qq.com</a>
</li>
<li>
<label>个人主页 <i class="fa fa-id-card-o " aria-hidden="true"></i></label>
<a href="#" target="_blank">0b11111110.com/</a>
</li>
<li>
<label>Github <i class="fa fa-github " aria-hidden="true"></i></label>
<a href="https://github.com/luojaye" target="_blank">github.com/luojaye</a>
</li>
</ul>
</section>
<!-- 技能点 -->
<section class="skill info-unit">
<h2>
<i class="fa fa-superpowers" aria-hidden="true"></i>技能点</h2>
<hr/>
<ul>
<li>
<label>HTML</label>
<progress value="50" max="100"></progress>
</li>
<li>
<label>CSS</label>
<progress value="60" max="100"></progress>
</li>
<li>
<label>JavaScript</label>
<progress value="10" max="100"></progress>
</li>
<li>
<label>read-write</label>
<progress value="75" max="100"></progress>
</li>
<li>
<label>舞蹈</label>
<progress value="80" max="100"></progress>
</li>
<li>
<label>小程序</label>
<progress value="0" max="100"></progress>
</li>
</ul>
</section>
<section class="qrcode info-unit">
<h2><i class="fa fa-weixin" aria-hidden="true"></i>二维码</h2>
<hr/>
<img class="fa-wechat" src="assets/images/wechat.jpg" style="width: 100%;" alt="">
</section>
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 编辑</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a>
</div>
<!-- 技术栈 -->
<!-- <div class="stack info-unit">
<h2><i class="fa fa-code" aria-hidden="true"></i>其他</h2>
<hr/>
<ul>
<li>
<label>前端</label>
<span>React、jQuery、微信小程序、Bootstrap、SASS、LESS</span>
</li>
<li>
<label>后端</label>
<span>Node.js、MySQL、MongoDB、WordPress、ThinkPHP</span>
</li>
<li>
<label>其他</label>
<span>Git、SVN、Markdown</span>
</li>
</ul>
</div> -->
</section>
<section class="main">
<!-- 教育经历 -->
<section class="edu info-unit">
<h2>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历</h2>
<hr/>
<style>
.introduce
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
.introduce li
fontfamily"隶书";
fontsize"20px";
</style>
<body>
<div class="introduce">
<ul>
<li>
<h3>
<b>中山大学南方学院 </b>
<time>2018.9-至今</time>
</h3>
<p>中山大学南方学院是2006年经教育部批准,由中山大学与广东珠江投资集团合作创办的独立学院,是一所多学科全日制应用型本科高等学校,2016年被遴选为广东省普通本科转型试点高校。</p>
</li>
<img class="fa-学校全景" src="assets/images/学校全景.jpg" style="width: 80%;" alt="">
<img class="fa-文学与传媒学院" src="assets/images/文学与传媒学院.jpg" style="width: 80%;" alt="">
<li>
<h3>
<b>中山大学南方学院 - 文学与传媒学院</b>
</h3>
<p> 文学与传媒学院,前身为文学系,创建于2006年,是我校最早设立的学系之一,2012年更名为文学与传媒系。为适应发展的需要,2017年又升格为文学与传媒学院。学院秉承"以生为本、实践育人"的办学理念,坚持内涵建设,在教学中坚持"实践育人"的方向,大力弘扬改革创新精神,以培养具备良好综合素质、深厚的知识底蕴、开阔的学术视野的应用型、复合型人才为目标,不断提高办学层次和教学质量,开创了学科专业融合、课内课外融合、研究应用融合、学生教师融合和校内校外融合"五融合"的培养模式,构建了以知识为基础,以市场为导向,以实践为手段的综合培养平台,为地方和国家培养了一大批新时代高素质应用型人才。</p>
</li>
</ul>
</section>
<!-- 核心课 -->
<section class="work info-unit">
<h2>
<i class="fa fa-shopping-bag" aria-hidden="true"></i>核心课程</h2>
<hr/>
<nav class="Scroll_Wrapper">
<figure class="Item">
<img src="assets/images/网页设计与制作.jpg" style="width: 100%;" alt="学生上完本课程建立起网页设计上与制作的实践技能及信心,设计与制作的流程、步骤、积累求职设计作品集,方法、技巧、设备)应用HTM普适性原则。" />
<figcaption class="Caption">学生上完本课程建立起网页设计上与制作的实践技能及信心,设计与制作的流程、步骤、积累求职设计作品集,方法、技巧、设备)应用HTM普适性原则。</figcaption>
</figure>
<figure class="Item">
<img src="assets/images/信息可视化.jpg" style="width: 100%;" alt="课程具体包容包括;图形感知及图形方法、数据连接及准备、图表类型、问题发向及假设信信息可视化数据。"/>
<figcaption class="Caption">课程具体包容包括;图形感知及图形方法、数据连接及准备、图表类型、问题发向及假设信信息可视化数据。</figcaption>
</figure>
<figure class="Item">
<img src="assets/images/大数据.jpg" style="width: 100%;" alt="本课程旨在大数据思维、商业及管理变革下,发展网新专业人才所富的数据的综合能力及产品设计能力" />
<figcaption class="Caption">本课程旨在大数据思维、商业及管理变革下,发展网新专业人才所富的数据的综合能力及产品设计能力</figcaption>
</figure>
<figure class="Item">
<img src="assets/images/线上调查与统计.jpg" style="width: 100%;" alt="本课程旨在培养学生调查与统计的核心基础能力,以展开用户研究、数据分析、量化文献等网络与新媒体专业的核心能力建设。" />
<figcaption class="Caption">本课程旨在培养学生调查与统计的核心基础能力,以展开用户研究、数据分析、量化文献等网络与新媒体专业的核心能力建设。</figcaption>
</figure>
</section>
<!-- 项目经验 -->
<section class="project info-unit">
<h2>
<i class="fa fa-terminal" aria-hidden="true"></i>个人项目</h2>
<hr/>
<ul>
<li>
<h3>
<span>[项目1]医学科学数据管理与共享平台</span>
<span class="link">
<a href="#" target="_blank">Demo</a>
</span>
<time>201X.X-201X.X</time>
</h3>
<ul class="info-content">
<li>技术栈:ThinkPHP+MongoDB+Axure</li>
<li>
<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
[目标]实现多类型多来源医学科学数据的提交、管理和共享
<br/>
<i class="fa fa-users" aria-hidden="true"></i>
[团队]同 2 位同专业同学一起
<br/>
<i class="fa fa-bars" aria-hidden="true"></i>
[贡献]完成从
<mark>“调研-设计-实现-文档”</mark>等工作,主要负责系统原型、功能框架及数据提交流程、元数据及源数据的管理与共享方案的设计以及系统开发等工作
<br/>
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
[效果]作品最终取得第三届共享杯国家级竞赛“一等奖” (2/2000)</li>
</ul>
</li>
<li>
<h3>
<span>[项目2]肿瘤流行病数据可视化</span>
<span class="link">
<a href="#" target="_blank">Demo</a>
</span>
<time>201X.X-201X.X</time>
</h3>
<ul class="info-content">
<li>技术栈:HTML 5+D3.js+ECharts+MySQL</li>
<li>
<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
[目标]实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
<br/>
<i class="fa fa-users" aria-hidden="true"></i>
[团队]与 1 位同学
<br/>
<i class="fa fa-bars" aria-hidden="true"></i>
[贡献]分析项目需求,清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据),并用
<mark>D3.js</mark>
<mark>ECharts</mark> 进行图形化展示以及实现简易自动分析 功能
<br/>
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
[效果]作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
</li>
</ul>
</li>
<li>
<h3>
<span>[项目3]肿瘤流行病数据可视化</span>
<span class="link">
<a href="#" target="_blank">Demo</a>
</span>
<time>201X.X-201X.X</time>
</h3>
<ul class="info-content">
<li>技术栈:HTML 5+D3.js+ECharts+MySQL</li>
<li>
<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
[目标]实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
<br/>
<i class="fa fa-users" aria-hidden="true"></i>
[团队]与 1 位同学
<br/>
<i class="fa fa-bars" aria-hidden="true"></i>
[贡献]分析项目需求,清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据),并用
<mark>D3.js</mark>
<mark>ECharts</mark> 进行图形化展示以及实现简易自动分析功能
<br/>
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
[效果]作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
</li>
</ul>
</li>
<li>
<h3>
<span>[项目4]肿瘤流行病数据可视化</span>
<span class="link">
<a href="#" target="_blank">Demo</a>
</span>
<time>201X.X-201X.X</time>
</h3>
<ul class="info-content">
<li>技术栈:HTML 5+D3.js+ECharts+MySQL</li>
<li>
<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
[目标]实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
<br/>
<i class="fa fa-users" aria-hidden="true"></i>
[团队]与 1 位
<br/>
<i class="fa fa-bars" aria-hidden="true"></i>
[贡献]分析项目需求,清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据),并用
<mark>D3.js</mark>
<mark>ECharts</mark> 进行图形化展示以及实现简易自动分析 功能
<br/>
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
[效果]作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
</li>
</ul>
</li>
</ul>
</section>
<!-- 自我评价 -->
<section class="work info-unit">
<h2>
<i class="fa fa-pencil" aria-hidden="true"></i>自我评价/期望</h2>
<hr/>
<p>[此处如果有一些能够量化的、且比较个性的指标会有加分,比如喜爱跑步坚持夜跑200小时或者200km等]
<span class="mark-txt">“多静多思考,反省不张扬”</span>是我给自己总结的“十字箴言”,鞭策自己做人既不能以己度人,也不以人观己,要脚踏实地做事,坚持自己的梦想和本心。</p>
</section>
</section>
</article>
<footer class="footer">
<p>© 2019 罗嘉怡.文档最后更新时间为
<time>2018年06月20日</time>.</p>
</footer>
<!-- 侧栏 -->
<aside>
<ul>
<li>
<a href="https://gitee.com/itsay/resume" target="_blank">secrecy code</a>
</li>
<li>
<a href="http://if2er.com/" target="_blank">嘎嘎</a>
</li>
</ul>
</aside>
<script src="./assets/js/index.js"></script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化