用HTML CSS JS 实现一个工作招聘平台展示响应式网站

news/2024/5/20 15:12:07/文章来源:https://picker.blog.csdn.net/article/details/124803739

主页:搞前端的半夏

简介:前端领域优质创作者。扫码或搜索添加文末公众号「搞前端的半夏」:🍗 回复 ”网站模板“,免费送网站模板!

欢迎点赞 👍 收藏 ⭐留言 📝 私信📄

N++网站模板 源码链接:https://pan.baidu.com/s/1ZoEYDLVwy6-kXQbLOpFIdw?pwd=3zuu

本网站可以作为一个公司内部的招聘平台,同时也可以作为第三方人力资源自建的岗位库,最重要的你可以利用它自建一个招聘平台!充满无限商机!!!

为什么要搭建网站招聘平台。

1、灵活性

网络招聘没有时间和地域的限制,随时可以在网上发布招聘、求职信息。网络招聘它不强求时间和空间上的绝对一致,方便了双方时间的选择。互联网本身不受时间、地域限制,也不受服务周期和发行渠道限制。完成了及时、迅捷的互动,跨地域性求职还可以大大缩短求职周期。

2、针对性强

网络招聘是一个跨时空的互动过程,对供求双方而言都是主动行为,无论是用人单位还是个人都能根据自己的条件在网上进行选择。这种积极的互动,减少了招聘和应聘过程中的盲目行为。

3、资源充足

招聘网站内置功能强大的人才和企业搜索引擎,企业可以根据单位需要,搜索几万余人的网上人才库筛选出最合适的人才;求职者也可以在网上搜索很多企业的招聘信息,挑选出适合自己的企业。

4、覆盖面广

互联网的覆盖是以往任何媒介都无法比拟的,它的触角可以轻易地延伸到世界的每一个角落。网络招聘依托于互联网的这个特点,达到了传统招聘方式无法获得的效果。现场招聘企业最多只可以收到周边城市的求职简历,但是网络招聘可以收到全国求职者的求职简历。

而网络招聘可能存在的缺点具体是以下几点:

功能介绍

作为一个招聘网站,通常包括以下几个功能。

  1. 首页展示整个招聘的数据
  2. 根据不同条件筛选岗位
  3. 在线申请岗位
  4. 找工作的经验分享
  5. 人才库的展示,方便企业直接找员工
  6. 在线的客服反馈
  7. 系统登录

演示

招聘网站

首页设计

首页大图展示

image-20220516100813360

  <header><div class="header-area header-transparent"><div class="main-header header-sticky"><div class="container"><div class="menu-wrapper d-flex align-items-center justify-content-between"><div class="left-content d-flex align-items-center"><div class="logo mr-45"><a href="index.html"></a></div><!-- Main-menu --><div class="main-menu d-none d-lg-block"><nav><ul id="navigation">                                     <li><a href="index.html">Home</a></li><li><a href="borwse_job.html">Browse Job</a></li><li><a href="#">Page</a><ul class="submenu"><li><a href="blog.html">Blog</a></li><li><a href="candidate.html">Candidates</a></li><li><a href="job_details.html">Job Details</a></li><li><a href="blog_details.html">Blog Details</a></li><li><a href="elements.html">Element</a></li></ul></li><li><a href="contact.html">Contact</a></li></ul></nav></div></div>     <!-- Button --><div class="buttons"><ul><li class="button-header"><a href="#" class="header-btn mr-10"> <i class="fas fa-phone-alt"></i>Post A Job</a><a href="login.html" class="btn header-btn2">Log In</a></li></ul></div></div><!-- Mobile Menu --><div class="col-12"><div class="mobile_menu d-block d-lg-none"></div></div></div></div></div></header>

热门岗位动态轮播图

image-20220516100837106

热门行业展示图

image-20220516100849519

岗位检索页面

左边是检索条件,右边是岗位列表

image-20220516101023876

具体岗位

岗位详情

image-20220516101105301

        <div class="job_details_area section-bg2"><div class="container"><div class="row"><div class="col-lg-8"><div class="job_details_header"><div class="single_jobs white-bg d-flex justify-content-between"><div class="jobs_left d-flex align-items-center"><div class="thumb"><img src="assets/img/icon/1.svg" alt=""></div><div class="jobs_conetent"><a href="#"><h4>Software Engineer</h4></a><div class="links_locat d-flex align-items-center"><div class="location"><p> <i class="fas fa-map-marker-alt"></i> California, USA</p></div><div class="location"><p> <i class="far fa-clock"></i> Part-time</p></div></div></div></div><div class="jobs_right"><div class="apply_now"><a class="heart_mark" href="#"> <i class="ti-heart"></i> </a></div></div></div></div><div class="descript_wrap white-bg"><div class="single_wrap"><h4>Job description</h4><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing.</p><p>Variations of passages of lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing.</p></div><div class="single_wrap"><h4>Responsibility</h4><ul><li>The applicants should have experience in the following areas.</li><li>Have sound knowledge of commercial activities.</li><li>Leadership, analytical, and problem-solving abilities.</li><li>Should have vast knowledge in IAS/ IFRS, Company Act, Income Tax, VAT.</li></ul></div><div class="single_wrap"><h4>Qualifications</h4><ul><li>The applicants should have experience in the following areas.</li><li>Have sound knowledge of commercial activities.</li><li>Leadership, analytical, and problem-solving abilities.</li><li>Should have vast knowledge in IAS/ IFRS, Company Act, Income Tax, VAT.</li></ul></div><div class="single_wrap"><h4>Benefits</h4><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing.</p></div></div><div class="apply_job_form white-bg"><h4>Apply for the job</h4><form action="#"><div class="row"><div class="col-md-6"><div class="input_field"><input type="text" placeholder="Your name"></div></div><div class="col-md-6"><div class="input_field"><input type="text" placeholder="Email"></div></div><div class="col-md-12"><div class="input_field"><input type="text" placeholder="Website/Portfolio link"></div></div><div class="col-md-12"><div class="input-group"><div class="input-group-prepend"><button type="button" id="inputGroupFileAddon03"><i class="fas fa-cloud-upload-alt" aria-hidden="true"></i></button></div><div class="custom-file"><input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03"><label class="custom-file-label" for="inputGroupFile03">Upload CV</label></div></div></div><div class="col-md-12"><div class="input_field"><textarea name="#" id="" cols="30" rows="10" placeholder="Coverletter"></textarea></div></div><div class="col-md-12"><div class="submit_btn"><button class="boxed-btn3 w-100" type="submit">Apply Now</button></div></div></div></form></div></div><div class="col-lg-4"><div class="job_sumary"><div class="summery_header"><h3>Job Summery</h3></div><div class="job_content"><ul><li>Published on: <span>12 Nov, 2019</span></li><li>Vacancy: <span>2 Position</span></li><li>Salary: <span>50k - 120k/y</span></li><li>Location: <span>California, USA</span></li><li>Job Nature: <span> Full-time</span></li></ul></div></div><div class="share_wrap d-flex"><span>Share at:</span><ul><li><a href="#"> <i class="fab fa-facebook-f"></i></a> </li><li><a href="#"> <i class="fab fa-google-plus-g"></i></a> </li><li><a href="#"> <i class="fab fa-twitter"></i></a> </li><li><a href="#"> <i class="fas fa-envelope"></i></a> </li></ul></div><div class="job_location_wrap"><div class="job_lok_inner"><div id="map" style="height: 200px;"></div><script>function initMap() {var uluru = {lat: -25.363, lng: 131.044};var grayStyles = [{featureType: "all",stylers: [{ saturation: -90 },{ lightness: 50 }]},{elementType: 'labels.text.fill', stylers: [{color: '#ccdee9'}]}];var map = new google.maps.Map(document.getElementById('map'), {center: {lat: -31.197, lng: 150.744},zoom: 9,styles: grayStyles,scrollwheel:  false});}</script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&callback=initMap"></script></div></div></div></div></div>

在线申请

image-20220516101114744

经验分享

image-20220516101152856

在线反馈

image-20220516101215627

登录

image-20220516162125793

   <main><!-- Register Area Start --><div class="register-form-area section-padding"><div class="container"><div class="row justify-content-center"><div class="col-xl-6 col-lg-7 col-md-10"><div class="register-form text-center"><!-- Login Heading --><div class="register-heading"><span>Sign Up</span><p>Create your account to get full access</p></div><!-- Single Input Fields --><div class="input-box"><div class="single-input-fields"><label>Full name</label><input type="text" placeholder="Enter full name"></div><div class="single-input-fields"><label>Email Address</label><input type="email" placeholder="Enter email address"></div><div class="single-input-fields"><label>Password</label><input type="password" placeholder="Enter Password"></div><div class="single-input-fields"><label>Confirm Password</label><input type="password" placeholder="Confirm Password"></div></div><!-- form Footer --><div class="register-footer"><p> Already have an account? <a href="login.html"> Login</a> here</p><button class="btn login-btn">Sign Up</button></div></div></div></div></div></div><!-- Register Area End --></main>

整体的文件目录

image-20220516162148901

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_814795.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML-CSS前端大作业一站式教育机构响应式前端网页网站模板

简介&#xff1a;前端领域优质创作者。扫码或搜索添加文末公众号「搞前端的半夏」&#xff1a;&#x1f357; 回复 ”网站模板“&#xff0c;免费送网站模板&#xff01; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 私信&#x1f4c4; 你还在未HTML网页设计作业头大吗&…

网站防止CC攻击的方法

CC攻击&#xff08;Challenge Collapsar&#xff09;是DDOS&#xff08;分布式拒绝服务&#xff09;的一种&#xff0c;也是一种常见的网站攻击方法&#xff0c;攻击者通过代理服务器或者肉鸡向向受害主机不停地发大量数据包&#xff0c;造成对方服务器资源耗尽&#xff0c;一直…

我的家乡网站_这个夏天对家乡就是想念丨看别人对家乡的思念超级温暖

这个夏天对家乡就是想念丨看别人对家乡的思念超级温暖候晓宾 润土眉目传书 今天这个夏天对家乡就是想念——————前序每个人对于自己的家乡和亲人都有特殊的念想&#xff0c;谁都不例外。今天看到真正意义上第一份工作的老领导&#xff08;2016年学习计算机后就业的第一个伯…

电信网为不能访问联通服务器的网站_为什么换ip软件在网络访问上不会受到限制呢?...

我们在上网的时候很多用户都遭受电信网的限制&#xff0c;而使用代理就可以攻克相关的限制设置&#xff0c;从而有利于访问。除此之外&#xff0c;代理还是专业的信息中转站&#xff0c;可以使得代理访问网络的速度大大增加。建立在这些优越性的基础上促使其访问网络不再受到限…

帝国php忘记密码,帝国CMS管理员密码忘记怎么解决 帝国CMS网站建站教程

帝国CMS管理员密码忘记怎么解决&#xff1f;有时候不小心忘记了帝国CMS的管理员帐号、密码、认证码及安全答案都忘记了&#xff0c;就可以参考下面的方法解决推荐学习《帝国cms教程》忘记后台管理员帐号怎么办&#xff1f;用phpmyadmin查看phome_enewsuser表里的记录&#xff1…

共享网站服务器的优缺点,共享主机好吗,共享主机的优点和缺点分析

用户从主机商那里租用共享主机后&#xff0c;可以通过提供的控制面板来管理自己的网站。共享主机的操作比独立服务器要方便很多&#xff0c;即使新手也能快速熟悉。共享主机好吗,共享主机在市场上很受用户欢迎&#xff0c;它的优势很多&#xff0c;但它的缺点也比较明显。以下是…

php mysql视频_PHP+MYSQL网站开发全程实例

教程介绍&#xff1a;PHPMYSQL网站开发全程实例课程介绍&#xff1a;1. 从观念的引述、程序代码解析到范例的延伸应用&#xff0c;给您最完整的学习流程。2. 实务网站范例&#xff0c;所有技术整合运用&#xff0c;实作技巧一览无遗。3.在PHP的程序设计中&#xff0c;以高阶的程…

网站的可扩展架构

一、可伸缩与可扩展—傻傻分不清楚 上篇笔记我们学习了可伸缩架构&#xff0c;但在实际场合中&#xff0c;包括许多架构师也常常混淆可伸缩和可扩展&#xff0c;用可扩展表示伸缩性。那么在此&#xff0c;跟随作者我们来理清这两个概念&#xff0c;避免我们以后对其傻傻分不清楚…

mysql负载导致网站访问高_MySQL负载高导致网站访问慢解决实例

今日发现网站访问慢&#xff0c;一次进行了排查&#xff0c;开始思路混乱&#xff0c;下面来梳理下一、故障分析首先&#xff0c;判断访问慢现象&#xff0c;是个人还是集体&#xff1f;&#xff1f;&#xff1f;个人现象排查&#xff1a;检查个人网络&#xff0c;pc&#xff0…

服务器运行bat文件闪退,win10运行bat文件一闪而过怎么办_网站服务器运行维护

c盘无法格式化的原因是什么_网站服务器运行维护c盘无法格式化的原因&#xff1a;因为C盘是Windows系统所在的磁盘&#xff0c;在Windows系统下要直接格式化C盘肯定是不行的&#xff0c;想格式化C盘可以用Windows的系统安装光盘/U盘来启动电脑&#xff0c;然后按照提示格式化C盘…

php 网站克隆,如何快速克隆一个网站

今天来说一个实用的工具&#xff1a;网站克隆。这样的功能对于技术人员来说&#xff0c;不算什么大的功能&#xff0c;大家可以用N种办法来实现&#xff0c;各有各的奇技淫巧。今天主要介绍的是A哥的克隆工具curlMulti。借用这个功能&#xff0c;非技术人员也可以快速的克隆整个…

一些很有趣的网站

1&#xff0c;360度高清晰无死角可任意放大缩小的网站&#xff0c;让你站在难以企及的视角观察壮美绝伦的风光&#xff01; &#xff08;温馨提示&#xff1a;看久了会感觉头晕哦&#xff0c;点击图片上的直升飞机可以体验上帝视角&#xff09; http://www.airpano.com/ 2&…

jsoup php网站,使用Jsoup实现爬虫技术的方法介绍

本篇文章给大家带来的内容是关于使用Jsoup实现爬虫技术的方法介绍&#xff0c;有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对你有所帮助。1.Jsoup简述Java中支持的爬虫框架有很多&#xff0c;比如WebMagic、Spider、Jsoup等。今天我们使用Jsoup来实…

delphi tabsheet多标签自适应宽度_#自适应SEO#方案

最近负责的两个网站都遇到了移动适配问题:一个是发现pc端有排名的很多是移动端的url&#xff0c;一个是因为技术省事301配置导致首页被降权。如何解决pc端有排名的很多是移动端的url这个问题&#xff1f;如何让蜘蛛知道移动端是移动端呢&#xff1f;网站需要做哪些配置&#xf…

qtplaintextedit如何删除内容_教你如何通过外贸网站内容审核优化谷歌SEO效果

Welcome to Worldsou!根据Google Trends的数据显示&#xff0c;在过去五年中内容营销的热度正在急剧增长。但虽然热度激增&#xff0c;但相对应技术水平进步的速度却相对缓慢。新兴趋势带来的问题是&#xff0c;营销人员需要一段时间才能更好的去使用它们。研究表示&#xff0c…

php websocket 客户端_php只能做网站?基于swoole+websocket开发双向通信应用

前言众所周知&#xff0c;PHP用于开发基于HTTP协议的网站应用非常便捷。而HTTP协议是一种单向的通信协议&#xff0c;只能接收客户端的请求&#xff0c;然后响应请求&#xff0c;不能主动向客户端推送信息。因此&#xff0c;一些实时性要求比较高的应用&#xff0c;如实时聊天、…

halcon 将数据保存到excel_使用selenium登录网站并爬取数据保存到excel

使用selenium模拟登录到网站后&#xff0c;利用requests爬取数据&#xff0c;用bs4解析数据&#xff0c;用xlwt保存到excel。自定义了2个函数&#xff1a;getData()用于获取数据&#xff0c;使用for循环获取多个页面的数据&#xff0c;解析后的数据保存到列表中&#xff1b;sav…

华为服务器管理卡网页打不开,华为路由器登录网站打不开怎么办?

问&#xff1a;华为路由器的登录网站打不开怎么办&#xff1f;答&#xff1a;华为路由器的默认登录地址是&#xff1a;192.168.3.1。正常情况下&#xff0c;电脑/手机连接到华为路由器的网络后&#xff0c;在浏览器中输入192.168.3.1&#xff0c;就可以打开登录页面。如果你在浏…

使用LXD搭建Web网站

欢迎大家前往腾讯云社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生 发表于云社区专栏 介绍 Linux的容器是Linux的一组进程&#xff0c;通过使用Linux内核功能与系统隔离。它是一个类似于虚拟机的构造&#xff0c;但它的更轻量级。您可以在同一台服务器上轻…

使用了 vue 的网站

目前我所知道的,使用了 vue 的网站如下: 手机搜狐 http://m.sohu.com/limit 哔哩哔哩 https://www.bilibili.com/ 又拍云 https://www.upyun.com/ 掘金 https://juejin.im/ 简书: https://www.jianshu.com/ 智联招聘 https://www.zhaopin.com/ 高德地图 API https://lbs.a…