本地分类信息网站 - 首页HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>本地生活信息平台 - 便捷的本地分类信息服务</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 全局样式 */
:root {
--primary-color: #4a6bdf;
--secondary-color: #6c757d;
--success-color: #28a745;
--info-color: #17a2b8;
--warning-color: #ffc107;
--danger-color: #dc3545;
--light-color: #f8f9fa;
--dark-color: #343a40;
--border-radius: 12px;
--box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f7fa;
}
a {
text-decoration: none;
color: var(--primary-color);
transition: var(--transition);
}
a:hover {
color: #3a56b5;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* 头部样式 */
header {
background-color: white;
box-shadow: var(--box-shadow);
position: sticky;
top: 0;
z-index: 1000;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo img {
height: 40px;
}
.logo h1 {
font-size: 1.5rem;
color: var(--primary-color);
font-weight: 700;
}
.search-bar {
flex: 0.6;
position: relative;
}
.search-bar input {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: var(--border-radius);
font-size: 1rem;
transition: var(--transition);
}
.search-bar input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(74, 107, 223, 0.2);
}
.search-bar button {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
color: white;
border: none;
border-radius: calc(var(--border-radius) - 5px);
padding: 5px 10px;
cursor: pointer;
transition: var(--transition);
}
.search-bar button:hover {
background: #3a56b5;
}
.user-actions {
display: flex;
gap: 15px;
}
.user-actions a {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
}
/* 主导航 */
.main-nav {
background-color: var(--primary-color);
}
.nav-container {
display: flex;
justify-content: space-between;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
position: relative;
}
.nav-links li a {
display: block;
color: white;
padding: 15px 20px;
font-size: 0.95rem;
}
.nav-links li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.nav-links li.active a {
background-color: rgba(255, 255, 255, 0.2);
}
/* 轮播图 */
.slider {
margin: 20px 0;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
position: relative;
height: 300px;
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 分类区块 */
.categories {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 30px 0;
}
.category-card {
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
transition: var(--transition);
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.category-header {
padding: 15px;
background-color: var(--primary-color);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.category-header h3 {
font-size: 1.1rem;
}
.category-header a {
color: white;
font-size: 0.9rem;
}
.category-content {
padding: 15px;
}
.info-item {
padding: 10px 0;
border-bottom: 1px dashed #eee;
display: flex;
justify-content: space-between;
}
.info-item:last-child {
border-bottom: none;
}
.info-item a {
color: #333;
flex: 1;
}
.info-item a:hover {
color: var(--primary-color);
}
.info-price {
color: var(--danger-color);
font-weight: bold;
margin-left: 10px;
}
/* 快速发布区域 */
.quick-post {
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 20px;
margin: 30px 0;
text-align: center;
}
.quick-post h2 {
margin-bottom: 15px;
color: var(--primary-color);
}
.post-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.post-btn {
padding: 10px 20px;
border-radius: var(--border-radius);
background-color: var(--primary-color);
color: white;
border: none;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.post-btn:hover {
background-color: #3a56b5;
transform: translateY(-2px);
}
.post-btn.secondary {
background-color: var(--secondary-color);
}
.post-btn.secondary:hover {
background-color: #5a6268;
}
/* 页脚 */
footer {
background-color: var(--dark-color);
color: white;
padding: 40px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-column h3 {
font-size: 1.2rem;
margin-bottom: 15px;
color: #fff;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column ul li a {
color: #adb5bd;
}
.footer-column ul li a:hover {
color: white;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #adb5bd;
font-size: 0.9rem;
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate {
animation: fadeIn 0.6s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
</style>
</head>
<body>
<!-- 头部区域 -->
<header>
<div class="header-container container">
<div class="logo">
<img src="https://page.mixinnet.cn/api/placeholder?w=600&h=300&text=LOGO" alt="本地生活信息平台">
<h1>本地生活信息平台</h1>
</div>
<div class="search-bar">
<input type="text" placeholder="搜索分类信息...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="user-actions">
<a href="#"><i class="fas fa-user-plus"></i> 注册</a>
<a href="#"><i class="fas fa-sign-in-alt"></i> 登录</a>
</div>
</div>
</header>
<!-- 主导航 -->
<nav class="main-nav">
<div class="nav-container container">
<ul class="nav-links">
<li class="active"><a href="#"><i class="fas fa-home"></i> 首页</a></li>
<li><a href="#"><i class="fas fa-car"></i> 拼车送货</a></li>
<li><a href="#"><i class="fas fa-briefcase"></i> 招聘求职</a></li>
<li><a href="#"><i class="fas fa-building"></i> 房产信息</a></li>
<li><a href="#"><i class="fas fa-handshake"></i> 转让合作</a></li>
<li><a href="#"><i class="fas fa-couch"></i> 家居装修</a></li>
<li><a href="#"><i class="fas fa-shopping-cart"></i> 二手市场</a></li>
<li><a href="#"><i class="fas fa-car-alt"></i> 汽车信息</a></li>
<li><a href="#"><i class="fas fa-tools"></i> 本地服务</a></li>
<li><a href="#"><i class="fas fa-apple-alt"></i> 农贸市场</a></li>
<li><a href="#"><i class="fas fa-store"></i> 供求加盟</a></li>
<li><a href="#"><i class="fas fa-hands-helping"></i> 寻求帮助</a></li>
</ul>
</div>
</nav>
<!-- 主要内容区域 -->
<main class="container">
<!-- 轮播图 -->
<div class="slider animate">
<img src="https://page.mixinnet.cn/api/placeholder?w=1200&h=300&text=广告轮播" alt="广告轮播">
</div>
<!-- 分类信息区块 -->
<div class="categories">
<!-- 拼车送货 -->
<div class="category-card animate delay-1">
<div class="category-header">
<h3><i class="fas fa-car"></i> 拼车送货</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">明天去上海，可带3人，每人80元</a>
<span class="info-price">80元</span>
</div>
<div class="info-item">
<a href="#">长期提供小件货物运输服务</a>
<span class="info-price">面议</span>
</div>
<div class="info-item">
<a href="#">周五下午去杭州，寻找拼车伙伴</a>
<span class="info-price">60元</span>
</div>
<div class="info-item">
<a href="#">搬家服务，厢式货车，价格优惠</a>
<span class="info-price">200元起</span>
</div>
</div>
</div>
<!-- 招聘求职 -->
<div class="category-card animate delay-2">
<div class="category-header" style="background-color: #28a745;">
<h3><i class="fas fa-briefcase"></i> 招聘求职</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">急聘餐厅服务员，月薪4000+</a>
<span class="info-price">4000元</span>
</div>
<div class="info-item">
<a href="#">招聘电商客服，有经验者优先</a>
<span class="info-price">4500元</span>
</div>
<div class="info-item">
<a href="#">求职：会计专业，3年工作经验</a>
<span class="info-price">面议</span>
</div>
<div class="info-item">
<a href="#">招聘兼职家教，辅导小学生作业</a>
<span class="info-price">80元/时</span>
</div>
</div>
</div>
<!-- 房产信息 -->
<div class="category-card animate delay-3">
<div class="category-header" style="background-color: #17a2b8;">
<h3><i class="fas fa-building"></i> 房产信息</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">市中心精装两室一厅出租</a>
<span class="info-price">3500元/月</span>
</div>
<div class="info-item">
<a href="#">学区房三室两厅出售，南北通透</a>
<span class="info-price">280万</span>
</div>
<div class="info-item">
<a href="#">单间出租，拎包入住，近地铁</a>
<span class="info-price">1500元/月</span>
</div>
<div class="info-item">
<a href="#">商铺出租，50平米，适合餐饮</a>
<span class="info-price">8000元/月</span>
</div>
</div>
</div>
<!-- 转让合作 -->
<div class="category-card animate delay-1">
<div class="category-header" style="background-color: #6f42c1;">
<h3><i class="fas fa-handshake"></i> 转让合作</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">奶茶店全套设备转让，九成新</a>
<span class="info-price">3.5万</span>
</div>
<div class="info-item">
<a href="#">寻求合作伙伴，共同经营健身房</a>
<span class="info-price">面议</span>
</div>
<div class="info-item">
<a href="#">美容院转让，客源稳定</a>
<span class="info-price">12万</span>
</div>
<div class="info-item">
<a href="#">餐饮技术转让，包教包会</a>
<span class="info-price">8000元</span>
</div>
</div>
</div>
<!-- 家居装修 -->
<div class="category-card animate delay-2">
<div class="category-header" style="background-color: #fd7e14;">
<h3><i class="fas fa-couch"></i> 家居装修</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">专业室内设计，免费上门测量</a>
<span class="info-price">面议</span>
</div>
<div class="info-item">
<a href="#">全屋定制家具，工厂直营</a>
<span class="info-price">688元/平</span>
</div>
<div class="info-item">
<a href="#">水电安装维修，经验丰富</a>
<span class="info-price">80元/次</span>
</div>
<div class="info-item">
<a href="#">二手沙发转让，八成新</a>
<span class="info-price">800元</span>
</div>
</div>
</div>
<!-- 二手市场 -->
<div class="category-card animate delay-3">
<div class="category-header" style="background-color: #e83e8c;">
<h3><i class="fas fa-shopping-cart"></i> 二手市场</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">iPhone 12 Pro Max 256G 国行</a>
<span class="info-price">3800元</span>
</div>
<div class="info-item">
<a href="#">联想笔记本电脑，i5处理器</a>
<span class="info-price">1500元</span>
</div>
<div class="info-item">
<a href="#">儿童自行车，适合6-10岁</a>
<span class="info-price">200元</span>
</div>
<div class="info-item">
<a href="#">二手空调1.5匹，制冷效果好</a>
<span class="info-price">800元</span>
</div>
</div>
</div>
<!-- 汽车信息 -->
<div class="category-card animate delay-1">
<div class="category-header" style="background-color: #20c997;">
<h3><i class="fas fa-car-alt"></i> 汽车信息</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">2018年大众速腾1.4T自动挡</a>
<span class="info-price">9.8万</span>
</div>
<div class="info-item">
<a href="#">专业汽车美容，内饰精洗</a>
<span class="info-price">150元</span>
</div>
<div class="info-item">
<a href="#">二手车评估，免费上门</a>
<span class="info-price">免费</span>
</div>
<div class="info-item">
<a href="#">汽车保险代理，各大公司比价</a>
<span class="info-price">面议</span>
</div>
</div>
</div>
<!-- 本地服务 -->
<div class="category-card animate delay-2">
<div class="category-header" style="background-color: #dc3545;">
<h3><i class="fas fa-tools"></i> 本地服务</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">专业开锁换锁，公安备案</a>
<span class="info-price">50元起</span>
</div>
<div class="info-item">
<a href="#">家电维修，冰箱空调洗衣机</a>
<span class="info-price">80元起</span>
</div>
<div class="info-item">
<a href="#">保洁服务，家庭/办公室</a>
<span class="info-price">30元/小时</span>
</div>
<div class="info-item">
<a href="#">管道疏通，24小时服务</a>
<span class="info-price">60元起</span>
</div>
</div>
</div>
<!-- 农贸市场 -->
<div class="category-card animate delay-3">
<div class="category-header" style="background-color: #ffc107; color: #333;">
<h3><i class="fas fa-apple-alt"></i> 农贸市场</h3>
<a href="#" style="color: #333;">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">新鲜土鸡蛋，农家自产</a>
<span class="info-price">1.2元/个</span>
</div>
<div class="info-item">
<a href="#">有机蔬菜配送，每周三次</a>
<span class="info-price">150元/周</span>
</div>
<div class="info-item">
<a href="#">散养土鸡，现杀现卖</a>
<span class="info-price">35元/斤</span>
</div>
<div class="info-item">
<a href="#">农家自酿蜂蜜，纯天然</a>
<span class="info-price">80元/斤</span>
</div>
</div>
</div>
<!-- 供求加盟 -->
<div class="category-card animate delay-1">
<div class="category-header" style="background-color: #6c757d;">
<h3><i class="fas fa-store"></i> 供求加盟</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">连锁奶茶店加盟，全程扶持</a>
<span class="info-price">8万起</span>
</div>
<div class="info-item">
<a href="#">寻找区域代理商，日化产品</a>
<span class="info-price">面议</span>
</div>
<div class="info-item">
<a href="#">特色小吃技术培训，包教包会</a>
<span class="info-price">3800元</span>
</div>
<div class="info-item">
<a href="#">批发市场档口招租</a>
<span class="info-price">5000元/月</span>
</div>
</div>
</div>
<!-- 寻求帮助 -->
<div class="category-card animate delay-2">
<div class="category-header" style="background-color: #17a2b8;">
<h3><i class="fas fa-hands-helping"></i> 寻求帮助</h3>
<a href="#">更多 <i class="fas fa-angle-right"></i></a>
</div>
<div class="category-content">
<div class="info-item">
<a href="#">寻找走失老人，穿红色外套</a>
<span class="info-price">酬谢</span>
</div>
<div class="info-item">
<a href="#">求租一室一厅，预算1500以内</a>
<span class="info-price">1500元</span>
</div>
<div class="info-item">
<a href="#">寻找英语家教，辅导初中生</a>
<span class="info-price">100元/时</span>
</div>
<div class="info-item">
<a href="#">求购二手电动车，预算1000</a>
<span class="info-price">1000元</span>
</div>
</div>
</div>
</div>
<!-- 快速发布区域 -->
<div class="quick-post animate delay-3">
<h2>快速发布信息</h2>
<div class="post-buttons">
<button class="post-btn"><i class="fas fa-plus-circle"></i> 发布拼车信息</button>
<button class="post-btn secondary"><i class="fas fa-plus-circle"></i> 发布招聘信息</button>
<button class="post-btn"><i class="fas fa-plus-circle"></i> 发布出租信息</button>
<button class="post-btn secondary"><i class="fas fa-plus-circle"></i> 发布二手信息</button>
</div>
</div>
</main>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>关于我们</h3>
<ul>
<li><a href="#">平台简介</a></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">团队介绍</a></li>
<li><a href="#">加入我们</a></li>
</ul>
</div>
<div class="footer-column">
<h3>帮助中心</h3>
<ul>
<li><a href="#">新手指南</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">发布规则</a></li>
<li><a href="#">防骗指南</a></li>
</ul>
</div>
<div class="footer-column">
<h3>联系我们</h3>
<ul>
<li><a href="#"><i class="fas fa-phone-alt"></i> 400-123-4567</a></li>
<li><a href="#"><i class="fas fa-envelope"></i> service@localinfo.com</a></li>
<li><a href="#"><i class="fas fa-map-marker-alt"></i> 北京市朝阳区科技园A座</a></li>
<li><a href="#"><i class="fas fa-clock"></i> 周一至周日 9:00-18:00</a></li>
</ul>
</div>
<div class="footer-column">
<h3>关注我们</h3>
<ul>
<li><a href="#"><i class="fab fa-weixin"></i> 微信公众号</a></li>
<li><a href="#"><i class="fab fa-weibo"></i> 新浪微博</a></li>
<li><a href="#"><i class="fab fa-qq"></i> QQ客服</a></li>
<li><a href="#"><i class="fab fa-tiktok"></i> 抖音账号</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 本地生活信息平台 版权所有 | 京ICP备12345678号 | 公安备案号11010502030123</p>
</div>
</div>
</footer>
<script>
// 简单的动画触发
document.addEventListener('DOMContentLoaded', function() {
const animateElements = document.querySelectorAll('.animate');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
}, { threshold: 0.1 });
animateElements.forEach(el => {
el.style.opacity = 0;
observer.observe(el);
});
// 模拟搜索功能
const searchBtn = document.querySelector('.search-bar button');
searchBtn.addEventListener('click', function() {
const searchInput = document.querySelector('.search-bar input');
if (searchInput.value.trim() === '') {
alert('请输入搜索关键词');
searchInput.focus();
} else {
alert('正在搜索: ' + searchInput.value);
// 实际应用中这里应该是跳转到搜索结果页
}
});
// 快速发布按钮点击事件
const postBtns = document.querySelectorAll('.post-btn');
postBtns.forEach(btn => {
btn.addEventListener('click', function() {
alert('即将跳转到信息发布页面');
// 实际应用中这里应该是跳转到对应的发布页面
});
});
});
</script>
</body>
</html>这个HTML代码实现了以下功能：
- 完整的本地分类信息网站首页，包含10个主要分类
- 响应式设计，电脑端优先
- 亮色主题，圆角布局
- 柔和的配色方案，清晰的字体
- 动画效果增强用户体验
- 包含头部导航、轮播图、分类信息区块、快速发布区和页脚
- 使用Font Awesome 6.4.0图标
- 简单的交互功能(搜索、按钮点击)
- 完全原生实现，不依赖任何框架
如需其他页面(列表页、详情页、商家页)的代码，请告知我继续生成。
需支付 5元 阅读剩余内容
