大家好，我是猿码叔叔，一个 Java 语言开发者。应网友要求，写一个简单的招聘页面。由于技术原因，页面相对简单，朋友们可以选择性的阅读，如果对您有帮助，也可直接拿去使用，因为接下来除了闲言碎语还有源代码干货。
一、内容介绍
这个简单的招聘网站，具备简单的响应式功能。页面元素包含：横向菜单、职位搜索与选择、简历表格、轮播图。页面没有实现与后端交互的功能，后续有需要可以更新，包括更丰富的功能都可以持续更新与扩展。
二、谈谈我对响应式的理解
-
布局
我们应当做好页面的布局设计。一般的网站布局都会大致分为 Header、Body 和 Footer 以及 Others 四个部分。对于前三个部分仍然可以再细分为相应的“块”，每个块包含相应要展示的内容。这些块可以是竖着排列，或者是横向并排排列，亦或是复杂的瀑布式排列。排列的布局应当符合人类的基本审美标准，比如对称、右重左轻等等。
-
自适应调整
自适应调整就是根据不同的设备来调整页面的属性，达到不同的设备布局仍然排列有序，符合我们的审美标准。这一点是建立在我们事先做好了页面布局的工作。
常见的自适应调整，我们可以使用 @media、flex、grid 和 multiCol 来实现。具体的功能大家可以去阅读 MDN Web Docs
https://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);
}四、结语
最后，感谢阅读。由于还在学习前端技术当中，文章内容不是很全面和系统，后续有机会还会持续补充！
