这个HTML文件是独立的，包含了内联的CSS样式，您可以直接复制代码到一个 .html 文件中,然后用浏览器打开即可看到效果。
（图片来源网络，侵删）
功能特点
- 响应式设计: 适配桌面、平板和手机等不同屏幕尺寸。
- 现代UI: 使用了卡片式布局、清晰的排版和舒适的配色。
- 交互性: 包含了搜索框、筛选按钮、悬停效果等,让页面更生动。
- 模块化结构: 代码结构清晰,易于理解和修改。
完整HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">理想工作 - 找到你梦想的工作</title>
<style>
/* --- 全局样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f4f7f6;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1, h2, h3 {
color: #2c3e50;
margin-bottom: 20px;
}
h2 {
font-size: 2.2rem;
text-align: center;
padding: 40px 0 20px;
}
.section {
padding: 40px 0;
}
/* --- 导航栏样式 --- */
.navbar {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.navbar-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: #3498db;
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
}
.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: #3498db;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s;
font-weight: bold;
}
.btn:hover {
background-color: #2980b9;
}
.btn-outline {
background-color: transparent;
border: 2px solid #3498db;
color: #3498db;
}
.btn-outline:hover {
background-color: #3498db;
color: #fff;
}
/* --- Hero Section (主横幅) 样式 --- */
.hero {
background: linear-gradient(rgba(52, 152, 219, 0.8), rgba(52, 152, 219, 0.8)), url('https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1974&auto=format&fit=crop') no-repeat center center/cover;
color: #fff;
text-align: center;
padding: 80px 0;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
}
/* --- 搜索框样式 --- */
.search-box {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
justify-content: center;
}
.search-input {
flex: 1;
min-width: 200px;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
.search-input:focus {
outline: none;
border-color: #3498db;
}
/* --- 职位卡片样式 --- */
.job-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
.job-card {
background-color: #fff;
border-radius: 8px;
padding: 25px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
.job-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.job-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 15px;
}
.job-title {
font-size: 1.3rem;
font-weight: bold;
color: #2c3e50;
}
.job-salary {
color: #e74c3c;
font-weight: bold;
}
.job-company {
color: #7f8c8d;
margin-bottom: 10px;
}
.job-location {
color: #7f8c8d;
font-size: 0.9rem;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.job-location::before {
content: "📍";
margin-right: 5px;
}
.job-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
background-color: #ecf0f1;
color: #34495e;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.8rem;
}
/* --- 公司推荐样式 --- */
.company-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 30px;
text-align: center;
}
.company-card {
background-color: #fff;
border-radius: 8px;
padding: 30px 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: transform 0.3s;
}
.company-card:hover {
transform: translateY(-5px);
}
.company-logo {
width: 80px;
height: 80px;
background-color: #3498db;
border-radius: 50%;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #fff;
}
.company-name {
font-weight: bold;
margin-bottom: 5px;
}
.company-jobs {
color: #7f8c8d;
font-size: 0.9rem;
}
/* --- 页脚样式 --- */
.footer {
background-color: #2c3e50;
color: #ecf0f1;
text-align: center;
padding: 40px 0;
}
.footer-links {
list-style: none;
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 20px;
}
.footer-links a {
color: #ecf0f1;
text-decoration: none;
}
.footer-links a:hover {
color: #3498db;
}
.copyright {
color: #bdc3c7;
font-size: 0.9rem;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.navbar-content {
flex-direction: column;
gap: 15px;
}
.nav-links {
gap: 15px;
}
.hero h1 {
font-size: 2.5rem;
}
.search-box {
flex-direction: column;
}
.search-input {
width: 100%;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container navbar-content">
<div class="logo">理想工作</div>
<ul class="nav-links">
<li><a href="#jobs">职位</a></li>
<li><a href="#companies">公司</a></li>
<li><a href="#post">发布职位</a></li>
<li><a href="#login">登录/注册</a></li>
</ul>
</div>
</nav>
<!-- 主横幅区域 -->
<header class="hero">
<div class="container">
<h1>开启你的职业新篇章</h1>
<p>发现最适合你的工作机会，连接与未来雇主</p>
<!-- 搜索框 -->
<div class="search-box">
<input type="text" class="search-input" placeholder="职位、关键词或公司名称">
<input type="text" class="search-input" placeholder="城市或地区">
<button class="btn">搜索</button>
</div>
</div>
</header>
<!-- 热门职位 -->
<section id="jobs" class="section">
<div class="container">
<h2>热门职位推荐</h2>
<div class="job-grid">
<!-- 职位卡片 1 -->
<div class="job-card">
<div class="job-header">
<h3 class="job-title">前端开发工程师</h3>
<span class="job-salary">15-25K</span>
</div>
<p class="job-company">阿里巴巴集团</p>
<p class="job-location">杭州市·西湖区</p>
<div class="job-tags">
<span class="tag">React</span>
<span class="tag">Vue.js</span>
<span class="tag">3-5年</span>
<span class="tag">本科</span>
</div>
</div>
<!-- 职位卡片 2 -->
<div class="job-card">
<div class="job-header">
<h3 class="job-title">Java后端开发</h3>
<span class="job-salary">20-35K</span>
</div>
<p class="job-company">腾讯科技</p>
<p class="job-location">深圳市·南山区</p>
<div class="job-tags">
<span class="tag">Spring Boot</span>
<span class="tag">MySQL</span>
<span class="tag">5年以上</span>
<span class="tag">本科</span>
</div>
</div>
<!-- 职位卡片 3 -->
<div class="job-card">
<div class="job-header">
<h3 class="job-title">UI/UX设计师</h3>
<span class="job-salary">12-20K</span>
</div>
<p class="job-company">字节跳动</p>
<p class="job-location">北京市·海淀区</p>
<div class="job-tags">
<span class="tag">Figma</span>
<span class="tag">Sketch</span>
<span class="tag">2-3年</span>
<span class="tag">本科</span>
</div>
</div>
<!-- 职位卡片 4 -->
<div class="job-card">
<div class="job-header">
<h3 class="job-title">产品经理</h3>
<span class="job-salary">18-30K</span>
</div>
<p class="job-company">美团</p>
<p class="job-location">上海市·浦东新区</p>
<div class="job-tags">
<span class="tag">B端</span>
<span class="tag">数据分析</span>
<span class="tag">3-5年</span>
<span class="tag">本科</span>
</div>
</div>
<!-- 职位卡片 5 -->
<div class="job-card">
<div class="job-header">
<h3 class="job-title">数据分析师</h3>
<span class="job-salary">15-22K</span>
</div>
<p class="job-company">京东集团</p>
<p class="job-location">北京市·朝阳区</p>
<div class="job-tags">
<span class="tag">Python</span>
<span class="tag">SQL</span>
<span class="tag">2-4年</span>
<span class="tag">硕士</span>
</div>
</div>
<!-- 职位卡片 6 -->
<div class="job-card">
<div class="job-header">
<h3 class="job-title">运营专员</h3>
<span class="job-salary">8-15K</span>
</div>
<p class="job-company">小米科技</p>
<p class="job-location">武汉市·东湖高新区</p>
<div class="job-tags">
<span class="tag">新媒体</span>
<span class="tag">内容</span>
<span class="tag">1-3年</span>
<span class="tag">大专</span>
</div>
</div>
</div>
</div>
</section>
<!-- 热门公司 -->
<section id="companies" class="section" style="background-color: #fff;">
<div class="container">
<h2>热门公司</h2>
<div class="company-grid">
<div class="company-card">
<div class="company-logo">阿</div>
<h3 class="company-name">阿里巴巴</h3>
<p class="company-jobs">正在招聘 128 个职位</p>
</div>
<div class="company-card">
<div class="company-logo">腾</div>
<h3 class="company-name">腾讯</h3>
<p class="company-jobs">正在招聘 256 个职位</p>
</div>
<div class="company-card">
<div class="company-logo">字</div>
<h3 class="company-name">字节跳动</h3>
<p class="company-jobs">正在招聘 312 个职位</p>
</div>
<div class="company-card">
<div class="company-logo">美</div>
<h3 class="company-name">美团</h3>
<p class="company-jobs">正在招聘 189 个职位</p>
</div>
<div class="company-card">
<div class="company-logo">京</div>
<h3 class="company-name">京东</h3>
<p class="company-jobs">正在招聘 145 个职位</p>
</div>
<div class="company-card">
<div class="company-logo">小</div>
<h3 class="company-name">小米</h3>
<p class="company-jobs">正在招聘 98 个职位</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<ul class="footer-links">
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">服务条款</a></li>
</ul>
<p class="copyright">© 2025 理想工作. All rights reserved.</p>
</div>
</footer>
</body>
</html>
如何使用和修改
- 保存代码: 将上面的所有代码复制并粘贴到一个新的文本文件中。
- 重命名: 将该文件另存为
index.html或任何你喜欢的.html文件名。 - 打开: 用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个文件,你就能看到这个求职网站的首页。
- :
- 标题和文字: 直接在HTML中修改
<h1>,<p>,<h3>等标签内的文字即可。 - 颜色: 修改CSS中的颜色值，
background-color: #3498db;中的#3498db是蓝色,你可以换成你喜欢的任何颜色代码。 - 图片: 主横幅的背景图片是通过
url('...')设置的,你可以替换成你自己的图片链接。 - 布局: 通过修改
.job-grid和.company-grid的grid-template-columns属性,可以轻松改变职位和公司卡片的列数。 - 添加功能: 这只是一个静态展示页面，如果需要真正的搜索、筛选、登录等功能，你需要学习 JavaScript 和 后端技术（如 Node.js, Python, PHP 等）来处理数据和交互逻辑。
- 标题和文字: 直接在HTML中修改
这个HTML代码为你提供了一个非常棒的起点，你可以在此基础上进行扩展和定制,打造出功能更强大的求职网站。
（图片来源网络，侵删）
