HTML5移动端招聘专题页面模板.zip_html如何设置招聘资源-CSDN文库

共136个文件

png：128个

js：4个

css：3个

需积分: 14 106 浏览量 2019-05-25 06:35:22 上传评论收藏 1.86MB ZIP 举报

HTML5移动端招聘专题页面模板是为现代互联网招聘需求设计的一款响应式网页模板。这款模板充分利用了HTML5的新特性，提供了一种在不同设备上自适应显示的解决方案，无论是桌面电脑、平板还是智能手机，都能实现良好的视觉体验和操作流畅性。 HTML5作为新一代的超文本标记语言，相较于HTML4，它引入了诸多新元素和功能，增强了网页的结构化和语义化。例如，`<header>`、`<nav>`、`<article>`、`<section>`、`<footer>`等元素，使得网页内容的组织更加清晰，有利于搜索引擎优化（SEO）和无障碍访问。同时，HTML5也提供了如`<canvas>`用于图形绘制，`<video>`和`<audio>`元素用于多媒体播放，以及离线存储API（如localStorage和sessionStorage）等功能，极大地丰富了网页的交互性和动态性。在移动端，HTML5模板的自适应分辨率设计是至关重要的。通过使用媒体查询（Media Queries）和百分比布局，页面可以根据设备的屏幕尺寸和方向进行调整，确保内容在任何屏幕上都能适配和展示。此外，触屏滑动操作的实现依赖于触摸事件（touch events）的支持，用户可以通过滑动手指浏览页面，提升移动设备上的用户体验。专题页面通常包含多个部分，如公司介绍、职位列表、申请流程、福利待遇等。在HTML5移动端招聘专题页面模板中，这些部分可能被设计为独立的模块，通过CSS3的过渡和动画效果，可以实现平滑的页面切换和元素展示，增强视觉吸引力。同时，为了提高加载速度和减少网络请求，可能会采用SVG矢量图或图标字体来替代传统的PNG或JPEG图片，确保图形在放大时不失真。此外，模板可能还包含一些优化移动性能的策略，如延迟加载（lazy loading）、代码分割（code splitting）以及预加载（prerendering）等技术，以确保页面在有限的带宽和计算资源下也能快速加载和运行。为了兼容不同的浏览器，模板可能需要遵循渐进增强（progressive enhancement）的原则，确保基本功能在所有设备上都能正常工作，同时为支持HTML5的现代浏览器提供更丰富的交互和视觉效果。 HTML5移动端招聘专题页面模板结合了HTML5的新特性、响应式设计和移动端优化策略，旨在为招聘企业和求职者提供一个高效、易用且具有吸引力的在线交流平台。无论是企业展示招聘信息，还是求职者寻找合适的工作，这样的模板都能提供优秀的用户体验。

资源详情

资源评论

资源推荐

收起资源包目录

HTML5移动端招聘专题页面模板.zip （136个子文件）

swiper.css 17KB

pages.css 7KB

common.css 7KB

index.html 7KB

jquery-1.11.3.min.js 94KB

swiper.jquery.min.js 59KB

index.js 4KB

countUp.min.js 3KB

bg04_05.png 85KB

bg04_03.png 72KB

bg04_02.png 59KB

16.png 53KB

bg04_06.png 47KB

bg04_01.png 43KB

bg04_04.png 31KB

20.png 28KB

bg04_07.png 25KB

04.png 21KB

35.png 18KB

05.png 17KB

31.png 15KB

17.png 14KB

9.png 14KB

10.png 14KB

27.png 13KB

18.png 13KB

27.png 13KB

18.png 13KB

5.png 13KB

24.png 13KB

12.png 13KB

14.png 13KB

2.png 12KB

6.png 12KB

13.png 12KB

25.png 12KB

33.png 11KB

21.png 11KB

19.png 11KB

28.png 11KB

19.png 11KB

28.png 11KB

11.png 11KB

22.png 11KB

15.png 11KB

32.png 11KB

30.png 10KB

03.png 10KB

23.png 10KB

36.png 9KB

7.png 9KB

about_sha.png 8KB

face.png 7KB

8.png 7KB

3.png 7KB

4.png 7KB

34.png 6KB

29.png 6KB

共 136 条

<!DOCTYPE html> <html> <head> <title>招聘</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no, email=no"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/swiper.css"> <link rel="stylesheet" type="text/css" href="css/pages.css?11111111111"> </head> <body>  <div id="swiperH5" class="swiper-container swiper-container-home"> <div class="swiper-wrapper swiper-wrapper-home">  <div class="swiper-slide slide-middle slide-1"> <div class="slide-wrap"> <div class="title"> <h5>最新招聘</h5> <h6>免费的手机招聘平台</h6> </div> <div class="content"> <ul class="list-j clr" id="listJoin"> <li><div><span>高效</span><img src="res/images/1/man_01.png"></div></li> <li><div><span>并</span><img src="res/images/1/man_02.png"></div></li> <li><div><span>有效</span><img src="res/images/1/man_03.png"></div></li> <li><div><span></span><img src="res/images/1/man_04.png"></div></li> <li><div><span>连接</span><img src="res/images/1/man_05.png"></div></li> <li><div><span></span><img src="res/images/1/man_06.png"></div></li> <li><div><span>求职者</span><img src="res/images/1/man_07.png"></div></li> <li><div><span>与</span><img src="res/images/1/man_08.png"></div></li> <li><div><span>招聘者</span><img src="res/images/1/man_09.png"></div></li> </ul> </div> </div> </div>  <div class="swiper-slide slide-middle slide-2"> <div class="slide-wrap"> <div class="title"> <img class="face" src="res/images/2/face.png"> <h5><span class="va_m">最新重庆招聘</span><img class="va_m ml_5" height="20" src="res/images/2/icon_sex.png"></h5> </div> <div class="content"> <div class="text"> <p>微博@最新重庆招聘已经运营三年，</p> <p>忠实粉丝  <span id="digitNum1">126,000</span></p> <p>月均博文阅读量  <span id="digitNum2">2,400,000</span></p> </div> </div> </div> </div>  <div class="swiper-slide slide-middle slide-3"> <div class="slide-wrap"> <div class="title"> <h6>早于微博招聘官微@微招聘1年</h6> </div> <div class="content"> <ul class="list-n"> <li> <h6>2013 - 01</h6> <p>@最新重庆招聘发布第一条微博信息</p> </li> <li> <h6>2014 - 09</h6> <p>微博粉丝突破10万</p> </li> <li> <h6>2015 - 01</h6> <p>上百万用户好评如潮！</p> </li> <li> <h6>2015 - 12</h6> <p>最新招聘APP正式上线</p> <p>……</p> </li> </ul> </div> </div> </div>  <div class="swiper-slide slide-4"> <div class="slide-wrap"> <div class="title"> <h6>成功帮助500万求职者找到满意工作</h6> </div> <div class="content"> <div class="about-wrap"> <div class="swiper-container swiper-container-about" id="swiperAbout"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(res/images/4/bg04_01.png)"></div> <div class="swiper-slide" style="background-image:url(res/images/4/bg04_02.png)"></div> <div class="swiper-slide" style="background-image:url(res/images/4/bg04_03.png)"></div> <div class="swiper-slide" style="background-image:url(res/images/4/bg04_04.png)"></div> <div class="swiper-slide" style="background-image:url(res/images/4/bg04_05.png)"></div> <div class="swiper-slide" style="background-image:url(res/images/4/bg04_06.png)"></div> <div class="swiper-slide" style="background-image:url(res/images/4/bg04_07.png)"></div> </div> <div class="swiper-pagination"></div> </div> </div> </div> </div> </div>  <div class="swiper-slide slide-middle slide-5"> <div class="slide-wrap"> <div class="title"> <h6>帮助上万家企业快速找到<br>合适人才</h6> </div> <div class="content"> <ul class="list-a clr" id="lis"> <li><span style="background-image:url(images/5/1.png);"></span></li> <li><span style="background-image:url(images/5/2.png);"></span></li> <li><span style="background-image:url(images/5/3.png);"></span></li> <li><span style="background-image:url(images/5/4.png);"></span></li> <li><span style="background-image:url(images/5/5.png);"></span></li> <li><span style="background-image:url(images/5/6.png);"></span></li> <li><span style="background-image:url(images/5/7.png);"></span></li> <li><span style="background-image:url(images/5/8.png);"></span></li> <li><span style="background-image:url(images/5/9.png);"></span></li> </ul> </div> </div> </div> </div> </div>  <div class="home-foot-arrow"><i class="icon-arrow"></i></div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/swiper.jquery.min.js"></script> <script src="js/countUp.min.js"></script> <script src="js/index.js"></script> </body> </html>