选择你心仪的职业
填写你的应聘信息
如何用H5+CSS+JS写一个简单的招聘网站
大家好，我是猿码叔叔，一个 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部分
Title
-
utils.js部分
function iDomById(id) {
return document.getElementById(id);
}四、结语
最后，感谢阅读。由于还在学习前端技术当中，文章内容不是很全面和系统，后续有机会还会持续补充！