如何用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);
}

四、结语

最后，感谢阅读。由于还在学习前端技术当中，文章内容不是很全面和系统，后续有机会还会持续补充！