个人简历H5自适应模板下载使用资源-CSDN下载

共46个文件

jpg：22个

png：9个

js：6个

个人简历

个人主页

需积分: 50 20 浏览量 2018-08-31 14:51:49 上传评论收藏 2.27MB RAR 举报

【H5个人简历模板】是一种基于HTML5技术的求职者自我展示工具，它利用现代浏览器的特性，提供了自适应屏幕大小的功能，无论是在电脑、平板还是手机上都能呈现出优秀的视觉效果和用户体验。这个模板通常包含丰富的图形设计、交互元素以及个人详细信息，旨在吸引潜在雇主的注意并展示个人技能和经历。 H5，即HTML5，是超文本标记语言（HTML）的第五次重大修订，增加了许多新的语义元素和功能，如音频、视频、离线存储、拖放功能等，使网页开发更加灵活且具有更强的媒体处理能力。在个人简历模板中，这些功能可以用于创建动态的、互动的展示效果，比如滚动动画、点击弹出框、时间轴展示工作经历等。个人简历模板的自适应设计是关键特点之一。这种设计模式采用响应式布局，通过CSS3的媒体查询（Media Queries）来判断设备的屏幕尺寸，从而调整页面布局和样式，确保在不同设备上都能保持良好的可读性和可操作性。例如，可能会在小屏幕上将两列布局变为一列，或者调整字体大小以适应更小的视口。在【压缩包子文件的文件名称列表】中，"cpts_1006_bnv"可能是一个压缩包文件名，通常包括多个组成部分：'cpts'可能是项目或文件集的缩写，'1006'可能是版本号或编号，'bnv'可能代表某种特定的编码或者命名约定。在解压后，您会发现HTML文件、CSS文件、JavaScript文件以及可能的图像资源文件，这些都是构建H5个人简历模板所必需的。 HTML文件是模板的核心，其中包含了简历的所有内容和结构，使用标记语言描述文字、标题、段落、链接等元素。CSS文件负责定义这些元素的外观和布局，包括颜色、字体、间距、背景等。JavaScript文件则可以实现动态效果和用户交互，比如按钮点击事件、页面滚动动画等。在实际使用中，求职者需要根据自己的信息替换HTML文件中的示例文本，包括姓名、照片、联系方式、教育背景、工作经验、技能证书等。同时，也可以根据需要调整CSS样式以个性化模板的外观，使其更符合自己的品牌形象。 H5个人简历模板提供了一种便捷的方式，让求职者能够创建专业且吸引人的在线简历，利用现代Web技术展示自己的才华和个性。无论是前端开发者还是非技术背景的求职者，都可以通过学习和应用这些模板，提升自己的在线存在感，增加获得理想工作的机会。

资源推荐

资源详情

资源评论

收起资源包目录

H5个人简历模板.rar （46个子文件）

cpts_1006_bnv

css

owl.carousel.css 10KB

bootstrap.css 118KB

style.css 37KB

images

pic10.jpg 30KB

b2.jpg 42KB

social-icons.png 10KB

img1.jpg 133KB

b1.jpg 29KB

pic3.jpg 52KB

pic1.jpg 51KB

pic2.jpg 63KB

pic8.jpg 37KB

arrow.png 3KB

header-bg.jpg 423KB

pic12.jpg 42KB

pic7.jpg 53KB

left-arrow.png 3KB

search1.png 3KB

pic14.jpg 43KB

contact.jpg 98KB

pic6.jpg 62KB

contact.jpeg 460KB

pic4.jpg 45KB

close-icon.png 3KB

pic13.jpg 38KB

pic5.jpg 46KB

pic9.jpg 37KB

menu.png 3KB

about-pic.jpg 273KB

social-icons2.png 4KB

pic11.jpg 32KB

pic.jpg 45KB

right-arrow.png 3KB

b3.jpg 34KB

movetop.png 681B

fonts

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.eot 20KB

index.html 37KB

jquery.min.js 94KB

move-top.js 1KB

easing.js 5KB

easyResponsiveTabs.js 6KB

owl.carousel.js 37KB

bootstrap.js 66KB

<!DOCTYPE HTML> <html> <head> <title>Home</title> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />  <script src="js/jquery.min.js"></script>  <link href="css/style.css" rel='stylesheet' type='text/css' />  <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="" />   <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1000); }); }); </script>  </head> <body>   <div id="home" class="header"> <div class="container">  <div class="top-header">   <div class="top-nav"> <div class="navigation"> <div class="logo"> <h1><a href="index.html"><span>P</span>REFACE</a></h1> </div> <div class="navigation-right"> <span class="menu"><img src="images/menu.png" alt=" " /></span> <nav class="link-effect-3" id="link-effect-3"> <ul class="nav1 nav nav-wil"> <li class="active"><a data-hover="Home" href="index.html">Home</a></li> <li><a class="scroll" data-hover="About" href="#about">About</a></li> <li><a class="scroll" data-hover="Services" href="#services" >Services</a></li> <li><a class="scroll" data-hover="Experience" href="#work">Experience</a></li> <li><a class="scroll" data-hover="Portfolio" href="#port">Portfolio</a></li> <li><a class="scroll" data-hover="Blog" href="#blogs">Blog</a></li> <li><a class="scroll" data-hover="Contact" href="#contact">Contact</a></li> </ul> </nav>  <script> $( "span.menu" ).click(function() { $( "ul.nav1" ).slideToggle( 300, function() { // Animation complete. }); }); </script>  </div> <div class="clearfix"></div> </div>  </div> <div class="banner-info"> <div class="col-md-7 header-right"> <h1>Hi !</h1> <h6>UX & UI DESIGNER</h6> <ul class="address"> <li> <ul class="address-text"> <li><b>NAME</b></li> <li>I'M ROB LEE</li> </ul> </li> <li> <ul class="address-text"> <li><b>D.O.B</b></li> <li>23-06-1980</li> </ul> </li> <li> <ul class="address-text"> <li><b>PHONE </b></li> <li>+00 111 222 3333</li> </ul> </li> <li> <ul class="address-text"> <li><b>ADDRESS </b></li> <li>756 Global Place,New York.</li> </ul> </li> <li> <ul class="address-text"> <li><b>E-MAIL </b></li> <li><a href="mailto:[email protected]"> [email protected]</a></li> </ul> </li> <li> <ul class="address-text"> <li><b>WEBSITE </b></li> <li><a href="#">www.myresume.com</a></li> </ul> </li> </ul> </div> <div class="col-md-5 header-left"> <img src="images/img1.jpg" alt=""> </div> <div class="clearfix"> </div> </div> </div> </div> </div>  <div id="about" class="about"> <div class="col-md-6 about-left"> <div id="owl-demo1" class="owl-carousel owl-carousel2"> <div class="item"> <div class="about-left-grid"> <h2>Hi! I'm <span>Rob Lee</span></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p> <ul> <li><a class="a-btn-a scroll" href="#port">My Work</a></li> <li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li> </ul> </div> </div> <div class="item"> <div class="about-left-grid"> <h2>Hi! I'm <span>Rob Lee</span></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p> <ul> <li><a class="a-btn-a scroll" href="#port">My Work</a></li> <li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li> </ul> </div> </div> <div class="item"> <div class="about-left-grid"> <h2>Hi! I'm <span>ROB LEE</span></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p> <ul> <li><a class="a-btn-a scroll" href="#port">My Work</a></li> <li><a class="a-btn-h scroll" href="#contact">Hire Me</a></li> </ul> </div> </div> </div> </div> <div class="col-md-6 about-right"> </div> <div class="clearfix"> </div> <link href="css/owl.carousel.css" rel="stylesheet"> <script src="js/owl.carousel.js"></script> <script> $(document).ready(function() { $("#owl-demo1").owlCarousel({ items : 1, lazyLoad : false, autoPlay : true, navigation : false, navigationText : false, pagination : true, }); }); </script>  <script> $(document).ready(function() { $("#owl-demo3").owlCarousel({ items : 1, lazyLoad : false, autoPlay : true, navigation : false, navigationText : true, pagination :true, }); }); </script> </div>   <div id="services" class="services"> <div class="container"> <div class="service-head one text-center "> <h4>WHAT I DO</h4> <h3>MY <span>SERVICES</span></h3> <span class="border two"></span> </div>  <div class="wthree_about_right_grids w3l-agile"> <div class="col-md-6 wthree_about_righ

评论收藏

内容反馈