前端开发：实战项目之拉勾网

最新推荐文章于 2024-10-18 18:45:22 发布
最新推荐文章于 2024-10-18 18:45:22 发布
阅读量347 收藏 2
点赞数 6
分类专栏： 前端 文章标签： 前端 html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Zhangyuge/article/details/141260766
版权

实战项目之拉勾网

实战项目之拉勾网：拉勾网是一个知名的招聘网站，通过实战项目可以学习如何制作一个响应式的招聘网站，包括职位列表、搜索框、个人信息页面等。
  1. 首页 (index.html)
  2. 职位详情页 (job-detail.html)
  3. 个人信息页 (profile.html)

1. 首页 (index.html)

<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招聘网首页</title>
    <link rel="stylesheet" href="styles.css"></head><body>
    <header>
        <div class="container">
            <h1>招聘网</h1>
            <nav>
                <a href="index.html">首页</a>
                <a href="profile.html">个人信息</a>
            </nav>
        </div>
    </header>
    <main>
        <div class="container">
            <section class="search-bar">
                <input type="text" id="search" placeholder="搜索职位...">
                <button onclick="searchJobs()">搜索</button>
            </section>
            <section class="job-list">
                <!-- 职位列表将通过JavaScript动态生成 -->
            </section>
        </div>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2024 招聘网 - 版权所有</p>
        </div>
    </footer>
    <script src="script.js"></script></body></html>

2. 职位详情页 (job-detail.html)

<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位详情</title>
    <link rel="stylesheet" href="styles.css"></head><body>
    <header>
        <div class="container">
            <h1>招聘网</h1>
            <nav>
                <a href="index.html">首页</a>
                <a href="profile.html">个人信息</a>
            </nav>
        </div>
    </header>
    <main>
        <div class="container">
            <section class="job-detail">
                <!-- 职位详细信息将通过JavaScript动态生成 -->
            </section>
        </div>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2024 招聘网 - 版权所有</p>
        </div>
    </footer>
    <script src="script.js"></script></body></html>

3. 个人信息页 (profile.html)

<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <link rel="stylesheet" href="styles.css"></head><body>
    <header>
        <div class="container">
            <h1>招聘网</h1>
            <nav>
                <a href="index.html">首页</a>
                <a href="profile.html">个人信息</a>
            </nav>
        </div>
    </header>
    <main>
        <div class="container">
            <section class="profile">
                <h2>个人信息</h2>
                <p>姓名: 张三</p>
                <p>邮箱: zhangsan@example.com</p>
                <!-- 更多个人信息 -->
            </section>
        </div>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2024 招聘网 - 版权所有</p>
        </div>
    </footer></body></html>

CSS (styles.css)

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background: #007bff;
    color: white;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
}

nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

main {
    padding: 20px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.search-bar {
    margin-bottom: 30px;
    text-align: center;
}

.search-bar input {
    padding: 10px;
    width: 60%;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.search-bar button {
    padding: 10px 20px;
    border: none;
    background: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.search-bar button:hover {
    background: #0056b3;
}

.job-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.job-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.job-item h2 {
    margin: 0;
    font-size: 18px;
}

.job-item a {
    text-decoration: none;
    color: #007bff;
}

.job-item a:hover {
    text-decoration: underline;
}

.job-detail {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

footer {
    background: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

JavaScript (script.js)

// 示例职位数据const jobs = [
    { id: 1, title: '前端开发工程师', company: 'ABC科技', location: '北京', description: '负责前端开发工作' },
    { id: 2, title: '后端开发工程师', company: 'XYZ科技', location: '上海', description: '负责后端系统开发' }
];

function renderJobList() {
    const jobListElement = document.querySelector('.job-list');
    jobListElement.innerHTML = jobs.map(job => `
        <div class="job-item">
            <h2><a href="job-detail.html?id=${job.id}">${job.title}</a></h2>
            <p>公司: ${job.company}</p>
            <p>地点: ${job.location}</p>
        </div>
    `).join('');
}

function renderJobDetail() {
    const params = new URLSearchParams(window.location.search);
    const jobId = parseInt(params.get('id'));
    const job = jobs.find(job => job.id === jobId);
    
    if (job) {
        const jobDetailElement = document.querySelector('.job-detail');
        jobDetailElement.innerHTML = `
            <h2>${job.title}</h2>
            <p>公司: ${job.company}</p>
            <p>地点: ${job.location}</p>
            <p>描述: ${job.description}</p>
        `;
    }
}

function searchJobs() {
    const query = document.getElementById('search').value.toLowerCase();
    const filteredJobs = jobs.filter(job => job.title.toLowerCase().includes(query));
    const jobListElement = document.querySelector('.job-list');
    jobListElement.innerHTML = filteredJobs.map(job => `
        <div class="job-item">
            <h2><a href="job-detail.html?id=${job.id}">${job.title}</a></h2>
            <p>公司: ${job.company}</p>
            <p>地点: ${job.location}</p>
        </div>
    `).join('');
}

// 在首页加载时渲染职位列表if (document.querySelector('.job-list')) {
    renderJobList();
}

// 在职位详情页加载时渲染职位详情if (document.querySelector('.job-detail')) {
    renderJobDetail();
}

要点

  1. 响应式设计：使用了 max-width 和 flex 布局来确保页面在不同设备上的适配性。
  2. 现代化样式：使用了更多现代的 CSS 样式，如圆角、阴影和更清晰的按钮样式。
  3. 容器中心化：通过 .container 类确保内容在大屏幕上居中，并保持适当的边距。
  4. 提升可读性：增加了更显著的颜色对比和按钮的悬停效果，提升了用户体验。

Mr_Paizong
关注
专栏目录
拉勾网前端项目实战资源
12-28
首页登录页htmlcss
拉钩网前端项目实战05
qq_40850291的博客
03-29 276
拉钩网前端项目实战 拉钩网前端项目实战05 footer部分设计 一、footer部分设计 1.html部分 <div class="footer"> <div class="fooTop main"> <div class="appBox fl"> <p class="btnApp"><span></span>下载拉钩APP</p
机器学习实战项目-拉勾网
qq_57419675的博客
01-14 301
机器学习实战（一）——利用爬虫获取数据
拉钩网前端项目实战04
qq_40850291的博客
03-29 280
拉钩网前端项目实战 拉钩网前端项目实战04 banner和content设计 一、banner部分设计 1.html部分 <div class="banner"> <div class="banCon main clearFixed"> <div class="banLeft fl"> <ul class="banList">
拉钩网前端项目实战01
qq_40850291的博客
03-22 762
这里写自定义目录标题拉钩网前端项目实战01网站整体布局分析清除默认样式通用样式header头部布局设计 拉钩网前端项目实战01 整体布局分析以及头部布局设计 网站整体布局分析 网站整体可分为五部分：header search banner content footer 清除默认样式 /* 清除默认样式 */ * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } 通用样式 //
非常漂亮的100个前端案例_ 11个web 前端开发实战项目案例源码百度云, js前端开发实际案例-Web开发代码类资源
06-13
非常漂亮的100个前端案例，包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等等，只有你想不到。
Taro多端开发实现原理与项目实战
03-28
《Taro多端开发实现原理与项目实战》深入解析了现代前端开发中的一个重要技术——Taro，这是一种跨平台开发框架，旨在实现一次编写，多端运行的目标，覆盖了H5、微信小程序、支付宝小程序等多个平台。本文将详细介绍...
移动web前端高效开发实战
07-22
资源名称：移动web前端高效开发实战 资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
vue前端开发实战PPT
01-25
Vue前端开发实战PPT系列涵盖了从基础到高级的Vue开发技能，旨在帮助开发者提升项目实战能力。 首先，从标题和描述我们可以看出，这个系列主要关注Vue的实际应用，通过一系列的PPT教程来教授开发人员如何有效地使用...
06_实现watch
qq_53109172的博客
10-16 1086
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
xiaogang1226的博客
10-16 386
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端开发攻略---8种方法实现在浏览器中跨页面通信
nibabaoo的博客
10-15 1253
浏览器实现跨标签页通信的多种方式
前端地图数据开发
shuxiaoxii的博客
10-13 352
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
计算机毕业设计 | SSM 校园线上订餐系统(附源码)
说书客
10-14 1123
本系统基于SSM实现了餐馆点餐系统。项目功能（用户点餐子系统）：登录注册，选座，商品购买，我的订单等。（后台管理子系统）：用户管理，餐桌管理，菜品管理，菜系管理，订单管理等
Java根据word 模板，生成自定义内容的word 文件
最新发布
missgrass的博客
10-18 685
主要是项目中需要定制化一个word，也就是有一部分是固定的，就是有一个底子，框架，里面的内容是需要填充的。然后填充的内容很多，包括文本框、图片、文本、前端传过来的富文本、表格的设计。我最开始用的是EasyPoi的方法进行导入的，也就是网上比较常见的下面这样的方法进行填充word模版，如果你只比较简单的数据，那使用EasyPoi就够了。但是我涉及到了富文本的转换，就是我要把富文本渲染成docx支持的格式，所以我换了种方法。我这里是在静态资源里的模版，你也可以读取自己的其他目录下的文件，主要是只要是。
纯前端如何实现批量下载功能呢?
tan_xiao_tan的博客
10-14 442
**需求:***在不依赖后端的情况下,前端需要独立实现批量下载,且下载的文件需统一放在一个文件夹中并压缩。html2canvas可以实现截图功能。FileSaver 保存文件到本地。JsPDF 可以将文件生成pdf。JSZip 可以压缩文件。
JavaScript函数
学无止境
10-14 730
和变量类似，函数必须先定义然后才能使用。使用 `function` 关键字定义函数。> function：函数、功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值