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