如何用H5+CSS+JS写一个简单的招聘网站

这篇具有很好参考价值的文章主要介绍了如何用H5+CSS+JS写一个简单的招聘网站。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大家好,我是猿码叔叔,一个 Java 语言开发者。应网友要求,写一个简单的招聘页面。由于技术原因,页面相对简单,朋友们可以选择性的阅读,如果对您有帮助,也可直接拿去使用,因为接下来除了闲言碎语还有源代码干货。

一、内容介绍

这个简单的招聘网站,具备简单的响应式功能。页面元素包含:横向菜单、职位搜索与选择、简历表格、轮播图。页面没有实现与后端交互的功能,后续有需要可以更新,包括更丰富的功能都可以持续更新与扩展。

二、谈谈我对响应式的理解

  • 布局

我们应当做好页面的布局设计。一般的网站布局都会大致分为 Header、Body 和 Footer 以及 Others 四个部分。对于前三个部分仍然可以再细分为相应的“块”,每个块包含相应要展示的内容。这些块可以是竖着排列,或者是横向并排排列,亦或是复杂的瀑布式排列。排列的布局应当符合人类的基本审美标准,比如对称、右重左轻等等。

  • 自适应调整

自适应调整就是根据不同的设备来调整页面的属性,达到不同的设备布局仍然排列有序,符合我们的审美标准。这一点是建立在我们事先做好了页面布局的工作。

常见的自适应调整,我们可以使用 @media、flex、grid 和 multiCol 来实现。具体的功能大家可以去阅读 MDN Web Docshttps://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

这篇文章详细介绍了以上属性的各个功能。

三、代码

        注:以下代码页面布局借鉴某招聘网站。

  • CSS部分
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#main-menu {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 100%;
    box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.3);
}

.main-body {
    position: relative;
    padding: 30px;
    display: flex;
    justify-content: center;
}

.carousel-space {
}

.search-space {
    margin-bottom: 20px;
}

.fake-input-box {
    border: solid 1px lightgrey;
    height: 45px;
    position: relative;
    border-radius: 2px;
    display: flex;
    justify-content: center;
}

.fake-input-search {
    height: 100%;
    border: none;
    width: 80px;
    background: red;
    color: white;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    float: right;
    cursor: pointer;
}

.none-style-input {
    border: none;
    height: 100%;
    width: 100%;
    padding: 2px 5px;
    outline-style: none;
}

.none-style-ul {
    list-style: none;
}

.main-menu-ul {
    display: flex;
    justify-content: center;
}

.main-menu-item {
    padding: 12px 16px;
}

.main-menu-item:not(li:first-child) {
    cursor: pointer;
}

.main-menu-item:first-child {
    margin-right: 50px;
}

.main-menu-item:last-child {
    margin-left: 50px;
    color: blue;
}

.main-menu-item:hover:not(li:first-child, li:last-child) {
    background: red;
    color: white;
}

.addr-switch {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 3px;
}

.addr-switch:hover {
    color: dodgerblue;
}

.main-footer {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex: 1;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    line-height: 20px;
    padding: 10px 0;
}

.company-info {
    align-items: center;
}

.hiring-info {
    margin-right: 10px;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
}

.alternative-info {

}

.hiring-info-title {
    margin-top: 16px;
}

.jobs-selection {
    margin-top: 30px;
}

.jobs-selection > ul > li {
    padding: 20px 26px;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.jobs-selection > ul > li:first-child {

}

.drawer-container {
    position: fixed;
    height: 100%;
    width: 600px;
    right: -600px;
    top: 0;
    background: white;
    box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.2);
    transition: transform 1.5s;
    max-width: 100%;
}

.show {
    transform: translateX(-600px); /* 展开抽屉 */
    transition: transform 1.5s;
}

.drawer-header {
    padding: 10px 16px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    color: lightslategray;
}

.drawer-body {
    padding: 10px;
    height: auto;
}

.close-icon {
    float: right;
    cursor: pointer;
}

.form-item:first-child {
    display: flex;
    flex-direction: row;
}

.form-item {
    padding: 10px;
    width: 100%;
    height: auto;
}

.form-item > label {
    display: flex;
    flex: 2;
}

.form-item > label > span {
    width: 30%;
    vertical-align: bottom;
    color: rgba(0, 0, 0, 0.6);
}

.form-item > label > input {
    width: 100%;
    height: 30px;
    padding: 4px;
}

.drawer-footer {
    float: right;
}

.confirm-btn {
    background: red;
}

.close-btn {
    background: rgba(0, 0, 0, 0.4);
}

.confirm-btn, .close-btn {
    outline-style: none;
    border: none;
    padding: 4px 6px;
    margin-right: 8px;
    cursor: pointer;
    color: white;
}

img {
    max-width: 100%;
}
  • H5+JS部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
        minimum-scale=1.0, user-scale=0">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/a.css">

</head>
<body>
<div class="main">
    <header class="main-header">
        <menu id="main-menu"></menu>
    </header>
    <main class="main-body">
        <div class="hiring-info">
            <div class="hiring-info-title">
                <h5>选择你心仪的职业</h5>
            </div>
            <div class="jobs-selection" id = 'jobs-selection'>
            </div>
        </div>
        <div class="carousel-space">
            <div class="search-space">
                <div class="fake-input-box">
                    <input class="none-style-input" placeholder="搜索热门职业">
                    <button class="fake-input-search">搜索</button>
                </div>
            </div>
            <div class="carousel-img-group">
                <div>
                    <img id="carousel-img" alt="" width="600px" height="500px" src="carouselImg/c.jpg">
                </div>
            </div>
        </div>
        <div class="other-info"></div>
    </main>
    <footer class="main-footer">
        <div class="company-info">
            <p>未经 xxxxxx.com 同意,不得转载本网站之所有招聘信息及作品 xxxxx招聘网版权所有</p>
            <p>京ICP备xxxxxxx号  合字xx-xxxxxx</p>
            <p>京公网安备 1xxxxxxxxxxxxx号  人力资源许可证:xxxxxxxxxxxxxxxxx号</p>
            <p>网上有害信息举报专区  违法不良信息举报电话:400-xxx-xxxx 关爱未成年举报热线:400-xxx-xxxx-x</p>
            <p>xx区人力资源与社会保障局监督电话</p>
        </div>
        <div class="alternative-info">
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>
    </footer>
    <div class="drawer-container">
        <div class="drawer-header">
            <span>
                填写你的应聘信息
            </span>
            <span onclick="closeDrawerContainer()" class="close-icon">×</span>
        </div>
        <div class="drawer-body">
            <form>
                <p class="form-item">
                    <label for="employee-name">
                        <span>姓名: </span>
                        <input id="employee-name"/>
                    </label>
                </p>
                <p class="form-item">
                    <label for="employee-age">
                        <span>年龄: </span>
                        <input id="employee-age"/>
                    </label>
                </p>
                <p class="form-item">
                    <label for="employee-address">
                        <span>目前住址: </span>
                        <input id="employee-address"/>
                    </label>
                </p>
                <p class="form-item">
                    <label for="workplace-expected">
                        <span>希望工作的城市: </span>
                        <input id="workplace-expected"/>
                    </label>
                </p>
                <p class="form-item">
                    <label for="employee-eduction">
                        <span>您的学历: </span>
                        <input id="employee-eduction"/>
                    </label>
                </p>
                <p class="form-item">
                    <label for="employee-major">
                        <span>您的专业:</span>
                        <input id="employee-major"/>
                    </label>
                </p>
                <p class="form-item">
                    <label for="employee-work-experiences">
                        <span>工作经历:</span>
                        <input id="employee-work-experiences"/>
                    </label>
                </p>
            </form>
        </div>
        <div class="drawer-footer">
            <button class="confirm-btn" onclick="">确定</button>
            <button class="close-btn" onclick="closeDrawerContainer()">关闭</button>
        </div>
    </div>
</div>
</body>
<script src="js/utils.js"></script>
<script type="text/javascript">

    window.onload = ()=> {
        this.initializeMenu();
        const intervalId = this.triggerCarousel();
        this.initializeCarousel(intervalId);
        this.initializeJobGenres();
    }

    const menuNames = [
        {id: '0', name: '全国', icon: ''},
        {id: '1', name: '首页', icon: ''},
        {id: '2', name: '城市频道', icon: ''},
        {id: '3', name: '政企招聘', icon: ''},
        {id: '4', name: '校园招聘', icon: ''},
        {id: '5', name: '高端职位', icon: ''},
        {id: '6', name: '海外招聘', icon: ''},
        {id: '7', name: '我要投简历', icon: ''},
    ];

    const jobGenre = ['技术', '产品', '设计', '市场', '运营', '销售', '管理'];

    const carouselPics = ['a', 'b', 'c'];
    function initializeCarousel(id) {
        const carousel = iDomById('carousel-img');
        carousel.onmouseover = () => {
            clearInterval(id);
        }

        carousel.onmouseleave = () => {
            this.initializeCarousel(triggerCarousel());
        }
    }

    function closeDrawerContainer() {
        const drawer = document.querySelector('.drawer-container');
        if (drawer.classList.contains('show')) {
            drawer.classList.remove('show'); // 关闭抽屉
        } else {
            drawer.classList.add('show'); // 打开抽屉
        }
    }

    function initializeJobGenres() {
        const parent = iDomById('jobs-selection');
        const ul = document.createElement('ul');
        ul.className = 'none-style-ul';
        const frag = document.createDocumentFragment();
        for (const name of jobGenre) {
            const li = document.createElement('li');

            li.onmouseover = () => {
                li.style.background = 'coral';
                li.style.color = 'white';
            }

            li.onmouseleave = () => {
                li.style.background = 'white';
                li.style.color = 'rgba(0, 0, 0, 0.7)';
            }

            li.innerText = name;
            frag.append(li);
        }
        ul.appendChild(frag);
        parent.appendChild(ul);
    }

    function triggerCarousel() {
        const obj = {x: 0};
        return setInterval(setCarouselSrc, 2000, obj);
    }

    function setCarouselSrc(obj) {
        obj.x = (obj.x + 1) % carouselPics.length;
        iDomById('carousel-img').src = `carouselImg/${carouselPics[obj.x]}.jpg`;
    }

    function initializeMenu() {
        const menu = iDomById('main-menu');
        const menuUl = document.createElement('ul');
        menuUl.className = 'main-menu-ul none-style-ul';
        const fragment = document.createDocumentFragment();
        for (const obj of menuNames) {
            const li = document.createElement('li');
            li.className = 'main-menu-item';

            const icon = document.createElement('span');
            icon.className = 'menu-item-icon';
            icon.innerText = obj.icon;

            const txt = document.createElement('span');
            txt.className = 'menu-item-name';
            txt.innerText = obj.name;

            li.appendChild(icon);
            li.appendChild(txt);

            fragment.append(li);
        }
        menuUl.appendChild(fragment);
        menu.appendChild(menuUl);


        const firstChild = menuUl.firstChild;
        const btn = document.createElement('button');
        btn.className = 'addr-switch';
        btn.innerText = '[切换]'
        firstChild.appendChild(btn);

        btn.onclick =()=> {
            addrSwitch();
        }

        const menuLi = document.getElementsByClassName('main-menu-item');
        const lastLi = menuLi[menuLi.length - 1];
        lastLi.onclick = () => {
            closeDrawerContainer();
        };
    }

    function addrSwitch() {

    }

</script>
</html>
  • utils.js部分 
function iDomById(id) {
    return document.getElementById(id);
}

四、结语 

最后,感谢阅读。由于还在学习前端技术当中,文章内容不是很全面和系统,后续有机会还会持续补充!文章来源地址https://www.toymoban.com/news/detail-810737.html

到了这里,关于如何用H5+CSS+JS写一个简单的招聘网站的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 大数据项目实战-招聘网站职位分析

    目录          第一章:项目概述 1.1项目需求和目标 1.2预备知识 1.3项目架构设计及技术选取 1.4开发环境和开发工具 1.5项目开发流程 第二章:搭建大数据集群环境 2.1安装准备 2.2Hadoop集群搭建 2.3Hive安装 2.4Sqoop安装 第三章:数据采集 3.1知识概要 3.2分析与准备 3.3采集网页数

    2024年02月05日
    浏览(41)
  • SQL 招聘网站岗位数据分析

    1.删除包含空字段的行 2.按照企业和岗位进行去重保留最新一条 3.筛选招聘地区在北上广深 4.过滤周边岗位保留任职要求包含数据的岗位 需求1:按照城市分组统计招聘总量和招聘职位数   需求2:按照企业类型进行招聘量的统计及招聘占比计算 需求3:计算岗位薪资的单位,

    2024年02月05日
    浏览(44)
  • 基于Python的51job(前程无忧)招聘网站数据采集,通过selenium绕过网站反爬,可以采集全国各地数十万条招聘信息

    使用Python编程语言和Selenium库来实现自动化的网页操作,从而实现登录、搜索和爬取职位信息的功能。 首先,导入了所需的库,包括time用于处理时间,selenium用于模拟浏览器操作,csv用于写入CSV文件,BeautifulSoup用于解析网页数据。然后,定义了一个名为login的函数,该函数接

    2024年01月19日
    浏览(58)
  • 全网最全靠谱找工作招聘网站大全

    智联招聘:www.zhaopin.com 前程无忧:www.51job.com 中华英才:www.chinahr.com 猎聘网:www.liepin.com 58同城:www.58.com 赶集网:www.ganji.com 百姓网:www.baixing.com 看准网:www.kanzhun.com 百度招聘:zhaopin.baidu.com 中国人才热线:www.cjo1.com 英才网联:www.800hr.com 拉钩网:www.lagou.com Boss直聘:www

    2024年02月16日
    浏览(55)
  • 【爬虫系列】使用Selenium模块采集招聘网站的职位信息(1)

    在上篇演示使用了 Request 模块采集智联招聘网站 PC 端网页的招聘信息,结果遇到了比较隐蔽的反爬限制(当时还不清楚什么原因导致的),看来使用该模块这条路暂时走不通了, 打算换用 Selenium 模块试试,并尝试寻找该网站反爬限制的具体原因 。 一、环境准备 Google 浏览

    2024年02月20日
    浏览(54)
  • 【爬虫系列】Python爬虫实战--招聘网站的职位信息爬取

    1. 需求分析 从网上找工作,大家一般都会通过各种招聘网站去检索相关信息,今天利用爬虫采集招聘网站的职位信息,比如岗位名称,岗位要求,薪资,公司名称,公司规模,公司位置,福利待遇等最为关心的内容。在采集和解析完成后,使用 Excel 或 csv 文件保存。 2. 目标

    2024年02月02日
    浏览(48)
  • 基于Python的招聘网站信息爬取与数据分析

    文末获取资源,收藏关注不迷路 随着社会经济的快速发展,人们的生活水平得到了显著提高,但随之而来的社会问题也越来越多。其中最为显著的就是就业问题。为此,招聘信息的展示也变得越来越为重要。但是在大量的招聘信息中,人们在提取自己最想要的信息时变得不那

    2024年02月04日
    浏览(47)
  • springboot 国家公务员招聘网站-计算机毕设 附源码80528

    目  录 摘要 1 绪论 1.1 研究背景与意义 1.2 开发现状 1.3 系统开发技术的特色 1. 4 springboot框架介绍 1. 5 论文结构与章节安排 2 2 国家公务员招聘网站 系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据增加流程 2 .3.2 数据修改流程 2 .3. 3数据删除流程 2.3 系统功能分析 2.3.1 功能

    2024年02月11日
    浏览(44)
  • PHP大型企业人才招聘网站源码带文字安装教程

    PHP大型企业人才招聘网站源码带文字安装教程 运行环境 服务器宝塔面板 PHP 5.6 Mysql 5.5及以上版本 Linux Centos7以上 功能说明: 会员模块包括企业管理、职位管理、名企管理、企业认证审核、 企业设置。内容模块包括新闻管理、新闻类别、新闻属性、添加新闻。 运营模块包括

    2024年02月02日
    浏览(45)
  • 基于Python的前程无忧、51job、智联招聘等招聘网站数据获取及数据分析可视化大全【代码+演示】

    职位标题 薪资 地区 工作年限要求 学历要求 发布时间 keyword pageNum jobRank 公司名称 公司类型 公司规模 行业 福利描述 HR标签 0 检具中级工程师(C) (MJ000656) 8千-1.2万·14薪 宣城 2年 大专 2023-12-08 04:00:38 c 1 0 上海保隆汽车科技股份有限公司 已上市 5000-10000人 汽车零配件 五险一

    2024年02月03日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包