原创内容采集站点设计与实现
我将设计一个简洁高效的原创内容采集站点，采用响应式布局，内容完全原创且合规，避免任何违禁词。下面是完整的实现方案：
<!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>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #4a6fa5;
--secondary: #6b8cae;
--accent: #ff7e5f;
--light: #f9f7f7;
--dark: #2b2d42;
--gray: #8d99ae;
--transition: all 0.3s ease;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.btn {
display: inline-block;
background: var(--accent);
color: white;
padding: 0.8rem 1.8rem;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: none;
cursor: pointer;
}
.btn:hover {
background: #ff6a4a;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* 头部样式 */
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 1.5rem 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
color: var(--accent);
}
nav ul {
display: flex;
list-style: none;
}
nav li {
margin-left: 1.8rem;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0.8rem;
border-radius: 4px;
transition: var(--transition);
}
nav a:hover, nav a.active {
background: rgba(255, 255, 255, 0.2);
}
/* 主要内容区域 */
.hero {
background: linear-gradient(rgba(74, 111, 165, 0.8), rgba(74, 111, 165, 0.8)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%234a6fa5"/><path d="M0 50 L100 50" stroke="%236b8cae" stroke-width="1"/></svg>') center/cover no-repeat;
color: white;
text-align: center;
padding: 5rem 1rem;
margin-bottom: 3rem;
}
.hero h1 {
font-size: 2.8rem;
margin-bottom: 1rem;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 1.5rem;
}
/* 内容采集区 */
.content-collector {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin-bottom: 3rem;
}
.collector-header {
text-align: center;
margin-bottom: 2rem;
}
.collector-header h2 {
font-size: 2rem;
color: var(--dark);
margin-bottom: 1rem;
}
.collector-header p {
color: var(--gray);
max-width: 700px;
margin: 0 auto;
}
.collector-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group.full-width {
grid-column: span 2;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--dark);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
.submit-area {
grid-column: span 2;
text-align: center;
margin-top: 1rem;
}
/* 内容展示区 */
.content-display {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
overflow: hidden;
margin-bottom: 3rem;
}
.section-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.section-header h2 {
font-size: 1.5rem;
color: var(--dark);
}
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
padding: 2rem;
}
.content-card {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
transition: var(--transition);
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.content-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.card-header {
background: var(--light);
padding: 1rem;
border-bottom: 1px solid #eee;
}
.card-header h3 {
font-size: 1.2rem;
color: var(--dark);
margin-bottom: 0.5rem;
}
.card-meta {
display: flex;
color: var(--gray);
font-size: 0.85rem;
}
.card-meta span {
margin-right: 1rem;
}
.card-body {
padding: 1.5rem;
}
.card-body p {
margin-bottom: 1.5rem;
color: #555;
}
.card-footer {
padding: 1rem 1.5rem;
background: #f9f9f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.card-tag {
background: var(--light);
padding: 0.3rem 0.7rem;
border-radius: 20px;
font-size: 0.8rem;
color: var(--gray);
}
/* 页脚样式 */
footer {
background: var(--dark);
color: white;
padding: 3rem 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: var(--accent);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: #ccc;
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--accent);
padding-left: 5px;
}
.copyright {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 0.9rem;
color: #aaa;
}
/* 响应式设计 */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
nav {
margin-top: 1rem;
}
nav ul {
justify-content: center;
}
nav li {
margin: 0 0.5rem;
}
.hero h1 {
font-size: 2.2rem;
}
.collector-form {
grid-template-columns: 1fr;
}
.form-group.full-width {
grid-column: span 1;
}
.submit-area {
grid-column: span 1;
}
}
@media (max-width: 480px) {
nav ul {
flex-direction: column;
}
nav li {
margin: 0.3rem 0;
}
.hero {
padding: 3rem 1rem;
}
.hero h1 {
font-size: 1.8rem;
}
.content-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<i class="fas fa-seedling"></i>
<span>采撷集</span>
</div>
<nav>
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">内容采集</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">内容分类</a></li>
<li><a href="#">关于平台</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="hero">
<div class="container">
<h1>发现与收集优质原创内容</h1>
<p>采撷集是一个专注于原创内容采集的平台，帮助您发现、收集和整理互联网上的优质原创资源</p>
<a href="#collector" class="btn">开始采集</a>
</div>
</section>
<div class="container">
<section id="collector" class="content-collector">
<div class="collector-header">
<h2>原创内容采集</h2>
<p>提交您发现的优质原创内容，支持文本、链接和文件上传</p>
</div>
<form class="collector-form" id="contentForm">
<div class="form-group">
<label for="title">内容标题</label>
<input type="text" id="title" placeholder="请输入内容标题" required>
</div>
<div class="form-group">
<label for="category">内容分类</label>
<select id="category">
<option value="technology">科技前沿</option>
<option value="design">创意设计</option>
<option value="education">教育学习</option>
<option value="culture">文化艺术</option>
<option value="lifestyle">生活方式</option>
</select>
</div>
<div class="form-group full-width">
<label for="description">内容描述</label>
<textarea id="description" placeholder="请详细描述内容信息..." required></textarea>
</div>
<div class="form-group">
<label for="source">来源链接</label>
<input type="url" id="source" placeholder="https://example.com">
</div>
<div class="form-group">
<label for="tags">内容标签</label>
<input type="text" id="tags" placeholder="多个标签用逗号分隔">
</div>
<div class="form-group full-width">
<label for="content">内容正文</label>
<textarea id="content" placeholder="粘贴或输入内容正文..." required></textarea>
</div>
<div class="submit-area">
<button type="submit" class="btn">提交内容</button>
</div>
</form>
</section>
<section class="content-display">
<div class="section-header">
<h2>最新采集内容</h2>
<div class="filter">
<select id="contentFilter">
<option value="all">全部内容</option>
<option value="technology">科技前沿</option>
<option value="design">创意设计</option>
<option value="education">教育学习</option>
<option value="culture">文化艺术</option>
<option value="lifestyle">生活方式</option>
</select>
</div>
</div>
<div class="content-grid" id="contentGrid">
<!-- 内容卡片将通过JS动态生成 -->
</div>
</section>
</div>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>关于采撷集</h3>
<p>"采撷集"是一个原创内容采集平台，致力于发现和整理互联网上的优质原创资源。我们尊重知识产权，鼓励原创内容创作。</p>
</div>
<div class="footer-section">
<h3>平台指南</h3>
<ul class="footer-links">
<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-section">
<h3>联系我们</h3>
<p>如有任何问题或建议，请通过以下方式联系我们：</p>
<p>邮箱：contact@caixieji.com</p>
</div>
</div>
<div class="copyright">
<p>© 2023 采撷集 - 原创内容采集平台. 保留所有权利</p>
</div>
</div>
</footer>
<script>
// 示例原创内容数据
const contentData = [
{
id: 1,
title: "现代前端开发趋势分析",
description: "本文探讨了2023年前端开发的主要趋势，包括Web组件、微前端架构和性能优化等方向的发展。",
category: "technology",
tags: ["前端", "JavaScript", "Web开发"],
date: "2023-10-15",
author: "张明"
},
{
id: 2,
title: "中国传统色彩在设计中的应用",
description: "探索中国传统色彩体系在现代设计中的运用，分析色彩的文化内涵和视觉效果。",
category: "design",
tags: ["设计", "色彩", "传统文化"],
date: "2023-10-12",
author: "王丽"
},
{
id: 3,
title: "高效学习策略研究",
description: "基于认知科学的研究，介绍几种高效的学习方法和技巧，帮助提升学习效率。",
category: "education",
tags: ["教育", "学习方法", "认知科学"],
date: "2023-10-08",
author: "李华"
},
{
id: 4,
title: "城市公共空间艺术装置",
description: "探索城市公共空间中艺术装置的设计理念和社会价值，分析几个国际知名案例。",
category: "culture",
tags: ["艺术", "城市设计", "公共空间"],
date: "2023-10-05",
author: "陈思"
},
{
id: 5,
title: "可持续生活方式实践指南",
description: "介绍如何在日常生活中实践可持续发展理念，从衣食住行各方面提供实用建议。",
category: "lifestyle",
tags: ["可持续", "生活方式", "环保"],
date: "2023-10-01",
author: "赵宇"
},
{
id: 6,
title: "人工智能在医疗领域的应用前景",
description: "分析人工智能技术在现代医疗诊断、治疗和健康管理中的应用现状和未来发展趋势。",
category: "technology",
tags: ["人工智能", "医疗", "科技"],
date: "2023-09-28",
author: "刘洋"
}
];
// 分类映射
const categoryMap = {
technology: "科技前沿",
design: "创意设计",
education: "教育学习",
culture: "文化艺术",
lifestyle: "生活方式"
};
// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
const contentGrid = document.getElementById('contentGrid');
const contentForm = document.getElementById('contentForm');
const contentFilter = document.getElementById('contentFilter');
// 渲染内容卡片
function renderContent(category = 'all') {
contentGrid.innerHTML = '';
const filteredData = category === 'all'
? contentData
: contentData.filter(item => item.category === category);
filteredData.forEach(item => {
const card = document.createElement('div');
card.className = 'content-card';
card.innerHTML = `
<div class="card-header">
<h3>${item.title}</h3>
<div class="card-meta">
<span><i class="far fa-user"></i> ${item.author}</span>
<span><i class="far fa-calendar"></i> ${item.date}</span>
</div>
</div>
<div class="card-body">
<p>${item.description}</p>
</div>
<div class="card-footer">
<div class="card-tags">
${item.tags.map(tag => `<div class="card-tag">${tag}</div>`).join('')}
</div>
<div class="card-category">
<span>${categoryMap[item.category]}</span>
</div>
</div>
`;
contentGrid.appendChild(card);
});
}
// 初始渲染
renderContent();
// 表单提交处理
contentForm.addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('title').value;
const category = document.getElementById('category').value;
const description = document.getElementById('description').value;
const tags = document.getElementById('tags').value.split(',').map(tag => tag.trim());
const content = document.getElementById('content').value;
// 创建新内容对象
const newContent = {
id: contentData.length + 1,
title: title,
description: description,
category: category,
tags: tags,
date: new Date().toISOString().split('T')[0],
author: "用户提交"
};
// 添加到数据数组
contentData.unshift(newContent);
// 重新渲染内容
renderContent(contentFilter.value);
// 重置表单
contentForm.reset();
// 显示成功消息
alert('内容提交成功！已添加到最新采集内容中。');
});
// 分类过滤
contentFilter.addEventListener('change', function() {
renderContent(this.value);
});
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
} else {
header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
}
});
});
</script>
</body>
</html>
设计特点
-
原创内容与合规性
- 所有示例内容均为原创，避免使用任何违禁词
- 平台名称"采撷集"体现内容采集概念
- 内容分类健康向上，符合规范
-
标题层级合理
- 每个页面只有一个H1标题（平台名称）
- 内容区块使用H2标签
- 内容卡片使用H3标签
-
响应式设计
- 使用CSS Grid和Flexbox布局
- 适配桌面、平板和手机设备
- 在小屏幕设备上自动调整布局
-
功能完整
- 内容采集表单（支持标题、分类、描述等）
- 内容展示区域（网格布局）
- 内容分类过滤功能
- 标签系统
-
视觉设计
- 蓝紫色渐变主题，专业而现代
- 卡片式设计增强内容可读性
- 适当的交互动画提升用户体验
该采集站点设计简洁高效，内容原创合规，标题层级合理。用户可以通过表单提交原创内容，平台展示最新采集的内容卡片，并支持按分类筛选。整个设计符合现代Web标准，且完全响应式。baijiahao.baidu.com/s?id=183050…
