全屏页面滚动个人简历模板源码.zip资源-CSDN文库

共23个文件

png：11个

css：3个

map：2个

需积分: 5 62 浏览量 2024-01-16 22:46:45 上传评论收藏 13.33MB ZIP 举报

全屏页面滚动个人简历模板是一种现代且引人注目的网页设计模式，它利用HTML、CSS和JavaScript技术，将用户界面设计成一个垂直滚动的故事，展示个人信息、技能、作品集等关键内容。这样的模板通常适用于设计师、开发者或者自由职业者，希望以独特方式呈现自我。在“全屏页面滚动个人简历模板源码.zip”这个压缩包中，包含的资源主要用于创建这样的模板。主要文件可能包括HTML文件（如`index.html`）、CSS样式表（可能命名为`style.css`）和JavaScript脚本（可能为`script.js`）。这些文件共同工作，实现了模板的动态效果和视觉美化。 HTML（HyperText Markup Language）是网页的基础结构，负责定义页面内容和布局。在这个模板中，`index.html`文件将包含所有页面元素，如头部、主体部分、页脚等，以及用于绑定CSS和JavaScript的引用。你可以通过记事本或其他文本编辑器直接修改`index.html`，定制你的个人简历内容。 CSS（Cascading Style Sheets）则用来控制页面的样式和布局。`style.css`文件可能包含定义字体、颜色、布局和动画效果的规则。例如，全屏滚动可能通过CSS的`transform`和`transition`属性实现，而个人简历的各个部分可能通过`section`或`div`元素分隔，并使用CSS定位为全屏显示。 JavaScript是实现动态效果的关键，如页面滚动时的内容切换和交互功能。`script.js`文件可能包含监听滚动事件的函数，根据滚动位置改变可见元素，或者添加其他交互式元素，如按钮响应或动画效果。JavaScript库如jQuery或纯JavaScript方法都可以用于实现这些功能。对于初学者，这个模板提供了一个学习和实践HTML、CSS和JavaScript结合的好机会。你可以通过修改源码来理解网页开发的基本原理，同时也能定制出符合自己需求的个人简历页面。而对于有经验的开发者，此模板则可以作为一个快速启动项目，节省设计时间，直接填充个人内容即可。在使用过程中，需要注意兼容性问题，确保模板在各种浏览器和设备上都能正常工作。此外，为了提高网页性能和用户体验，还可以考虑优化CSS和JavaScript代码，如减少重绘和回流，以及使用CDN（内容分发网络）加载外部资源。这个全屏页面滚动个人简历模板源码是一个实用的学习工具，可以帮助你创建出具有专业水准和个人特色的在线简历。无论是为了提升自己的技术能力还是为了展示自己的职业形象，都值得深入研究和使用。

资源推荐

资源详情

资源评论

收起资源包目录

全屏页面滚动个人简历模板源码.zip （23个子文件）

全屏页面滚动个人简历模板源码

源码

main.js 12KB

css

animation.scss 5KB

main.css 14KB

animation.css.map 6KB

.sass-cache

d98b987bdb516478ad8b1fed01cd258af4a8ef05

main.scssc 3KB

animation.css 5KB

build

css

main.css 83B

main.scss 10KB

main.css.map 15KB

index.html 9KB

images

sprite_img.png 12KB

w2.png 443KB

爱上读书--首页.png 1.17MB

个人空间.png 1.02MB

bg1.png 2.87MB

portrait1.jpg 70KB

w4.png 142KB

w3.png 766KB

w1.png 535KB

主页.png 3.49MB

2.png 5KB

22.png 70KB

fonts

youyuan.TTF 6.48MB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简历</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <aside> <a class="cur_a"><span>首页</span></a> <a><span>关于我</span></a> <a><span>技能</span></a> <a><span>经验</span></a> <a><span>联系我</span></a> </aside> <section class="page_one" id="page1"> <nav> <div class="nav_wrap"> <div class="resume_logo"> <a href="index.html">个人主页</a> </div> <div class="nav_bar"> <ul class="nav_bar_ul"> <li><a href="index.html">首页</a></li> <li><a href="http://www.qqmu.com/">技术导航</a></li> <li><a href="http://www.qqmu.com/">秒收录</a></li> <li><a href="http://www.qqmu.com/">个人主页</a></li> </ul> </div> </div> </nav> <div class="cen_con"> <div class="portrait"> <img onmousemove="this.src='images/22.png'"/ onmouseout="this.src='images/portrait1.jpg'"/ src="images/portrait1.jpg"> </div> <div class="cen_text"> <h2>有时候该有的不该有的,总是那么不约而至.</h2> <hr> <h3>XXXX</h3> <h3>Web前端工程师</h3> <h3>求职上海 / 苏州</h3> <h3>152XXXXXXX</h3> </div> </div> <div class="down_arrow"> <a class="scroll"><span></span></a> </div> </section> <section class="page_two" id="page2"> <div class="con_wrap"> <div class="tit_wrap"> <h1>关于我</h1> <div class="scissors"> <span></span> </div> <h2> 如果debugging是一种消灭bug的过程,那编程就一定是把bug放进去的过程。</h2> </div> <div class="myinfo"> <table> <tbody> <tr> <td rowspan="6"> <img src="images/portrait1.jpg"> </td> <td>姓名 | 张婷</td> <td>手机 | 18551133163</td> </tr> <tr> <td>性别 | 女</td> <td>邮箱 | 593022384@qq.com</td> </tr> <tr> <td>出生 | 1992.08.23</td> <td>QQ号 | 593022384</td> </tr> <tr> <td>居住 | 江苏省苏州市</td> <td>户籍 | 江苏省常州市</td> </tr> <tr> <td>学历 | 本科</td> <td>学校 | 淮阴师范学院</td> </tr> <tr> <td>专业 | 计算机科学与技术</td> <td>英语 | 英语六级</td> </tr> <tr> <td colspan="3"> <p>项目：</p><br> <a href="http://www.qqmu.com/">1. 闻行一阅读（基于Amaze UI 查看网址：www.qqmu.com）</a><br> <a>2. 中笕-汽车保养（基于Metronic的Bootstrap，内部项目，无法展示）</a><br><br> <p>小作品 </p><br> <a href="">1. 手工皂（注：瀑布流本地没问题） </a> <a href="">2. 个人主页 </a> <a href="">3. 手工皂 </a><br> </td> </tr> </tbody> </table> </div> </div> <div class="down_arrow"> <a class="scroll"><span></span></a> </div> </section> <section class="page_three" id="page3"> <div class="con_wrap"> <div class="tit_wrap"> <h1>技能</h1> <div class="scissors"> <span></span> </div> <h2>代码，我们眼中的世界，别人眼中的天书。</h2> </div> <div class="skill_con"> <div class="canvas_wrap"> <div class="canvas_con"> <div class="text_con"> <p class="percent">90%</p> <p class="chart_title">HTML5</p> </div> <canvas id="html5" width=160 height=160></canvas> </div> <div class="canvas_con"> <div class="text_con"> <p class="percent">90%</p> <p class="chart_title">CSS3</p> </div> <canvas id="css3" width=160 height=160></canvas> </div> <div class="canvas_con"> <div class="text_con"> <p class="percent">75%</p> <p class="chart_title">JS</p> </div> <canvas id="js" width=160 height=160></canvas> </div> <div class="canvas_con"> <div class="text_con"> <p class="percent">80%</p> <p class="chart_title">JQUERY</p> </div> <canvas id="jq" width=160 height=160></canvas> </div> <div class="canvas_con"> <div class="text_con"> <p class="percent">70%</p> <p class="chart_title">BOOTSTRAP</p> </div> <canvas id="bs" width=160 height=160></canvas> </div> <div class="canvas_con"> <div class="text_con"> <p class="percent">80%</p> <p class="chart_title">PS</p> </div> <canvas id="ps" width=160 height=160></canvas> </div> </div> <div class="text_wrap"> <p>1. 熟练HTML5，CSS3，JavaScript技术，开发符合W3C标准的前端网页。</p> <p>2. 熟练使用jQuery，bootstrap等前端框架技术。</p> <p>3. 熟悉sass工具，扩展css功能,提高css功能和效率。</p> <p>4. 熟悉Ajax的运行机制，能使用ajax进行数据交互。</p> <p>5. 熟练使用PS，墨刀等工具，能快速切图和搭建原型图。</p> <p>6. 熟悉W3C标准，对表现与数据分离、Web语义化等有较为深刻的理解。</p> <p>7. 精通流体布局和弹性布局，能适应各种分辨率。</p> <p>8. 熟悉各种主流浏览器的差异性，有解决主流浏览器的兼容性问题的经验。</p> </div> </div> </div> <div class="down_arrow"> <a class="scroll"><span></span></a> </div> </section> <section class="page_four" id="page4"> <div class="con_wrap"> <div class="tit_wrap"> <h1>工作经验</h1> <div class="scissors"> <span></span> </div> <h2>我现在做的一切仅仅是为了不让未来的自己后悔。</h2> </div> <div class="work_con"> <div class="programe"> <div class="work_time">5个月<br>中笕汽车保养</div> <div class="work_text"> <div class="triangle-left"></div> <div class="exCon"> <h4>开发时间：2015 /12--2016 /5</h4> <h5>开发工具：IntelliJ IDEA，sublime text</h5> <p>项目描述：</p> <p>该项目是关于汽车加盟店内部使用的汽车保养网站。加盟店主要有汽车保养下单，排班，考勤，申请补货等操作功能，以及门店信息，订单信息，库存心等查看的功能。总店有商品，门店，采购，补货，预警，财务，仓库等功能管理。</p> <p> 加盟店端采用原生搭建，总店端采用metronic+bootstrap框架。该项目是中笕内部员工使用。</p> <p>责任描述：</p> <p>1. 根据项目需求，快速构造原型图 </p> <p> 2. 参与页面的部分设计 </p> <p> 3. 负责加盟店的前端网站搭建以及总店端的页面修改</p> </div> </div> </div> <div class="programe"> <div class="work_time">5个月<br>闻行一阅读</div> <div class="work_text"> <div class="triangle-left"></div> <div class="exCon"> <h4>开发时间：2015 /6--2015 /10</h4> <h5>开发工具：eclipse，webstorm</h5> <p>项目描述：</p> <p>该项目是督促中小学生阅读的网站，可进行偏好的设置，书籍的选择，以及书籍内容的测试，适用个人也适用学校集体。 </p> <p>整个网站采用的是Amaze UI的框架。项目展示：http://www.qqmu.com/</p> <p>责任描述：</p> <p>1. 根据设计图进行网页的前端搭建。</p> <p>2. 根据客户的要求，进行网页的修改。 </p> </div> </div> </div> </div> </div> <div class="down_arrow"> <a class="scroll"><span></span></a> </div> </section> <section class="page_five" id="page5"> <div class="con_wrap"> <div class="tit_wrap"> <h1>联系我</h1>

评论收藏

内容反馈