资源发布站HTML代码设计与实现
我将为您创建一个现代、响应式的资源发布站HTML页面，并推荐一个标题："ResourceHub - 您的资源发布中心"。
设计思路
使用现代卡片式布局展示资源
响应式设计，适配各种设备
简洁明了的分类系统
直观的搜索和筛选功能
吸引人的配色方案
代码实现
<!DOCTYPE html><html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ResourceHub - 您的资源发布中心</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 20px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo h1 {
font-size: 2.2rem;
font-weight: 700;
}
.logo p {
font-size: 1rem;
opacity: 0.9;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
nav ul li a:hover {
color: #ffdd40;
}
/* 搜索区域 */
.search-section {
padding: 40px 0;
text-align: center;
}
.search-box {
max-width: 600px;
margin: 0 auto;
display: flex;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 50px;
overflow: hidden;
}
.search-box input {
flex: 1;
padding: 15px 25px;
border: none;
font-size: 1rem;
outline: none;
}
.search-box button {
background: #ff6b6b;
color: white;
border: none;
padding: 15px 30px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.search-box button:hover {
background: #ff5252;
}
/* 分类筛选 */
.categories {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 20px 0 40px;
}
.category-btn {
background: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.category-btn:hover, .category-btn.active {
background: #6a11cb;
color: white;
}
/* 资源卡片 */
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
.resource-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.resource-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}
.card-img {
height: 180px;
background: linear-gradient(45deg, #3498db, #9b59b6);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2.5rem;
}
.card-content {
padding: 20px;
}
.card-content h3 {
margin-bottom: 10px;
color: #2c3e50;
}
.card-content p {
color: #7f8c8d;
margin-bottom: 15px;
font-size: 0.95rem;
}
.meta {
display: flex;
justify-content: space-between;
color: #95a5a6;
font-size: 0.9rem;
border-top: 1px solid #f1f1f1;
padding-top: 15px;
margin-top: 15px;
}
/* 底部 */
footer {
background: #2c3e50;
color: #ecf0f1;
padding: 40px 0;
text-align: center;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.footer-section {
flex: 1;
min-width: 250px;
margin-bottom: 20px;
}
.footer-section h3 {
margin-bottom: 15px;
font-size: 1.2rem;
}
.footer-bottom {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #3c546c;
}
/* 响应式设计 */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
nav ul {
margin-top: 20px;
}
nav ul li {
margin: 0 10px;
}
.search-box {
flex-direction: column;
border-radius: 12px;
}
.search-box input {
border-radius: 12px 12px 0 0;
}
.search-box button {
border-radius: 0 0 12px 12px;
}
} </style></head><body>
<!-- 头部 -->
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<h1>ResourceHub</h1>
<p>您的资源发布中心</p>
</div>
<nav>
<ul>
<li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
<li><a href="#"><i class="fas fa-box-open"></i> 资源</a></li>
<li><a href="#"><i class="fas fa-upload"></i> 发布</a></li>
<li><a href="#"><i class="fas fa-user"></i> 我的</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- 搜索区域 -->
<section class="search-section">
<div class="container">
<h2>发现优质资源</h2>
<p>从数千个高质量资源中寻找您所需的内容</p>
<div class="search-box">
<input type="text" placeholder="搜索资源...">
<button><i class="fas fa-search"></i> 搜索</button>
</div>
<div class="categories">
<button class="category-btn active">全部</button>
<button class="category-btn">设计</button>
<button class="category-btn">开发</button>
<button class="category-btn">营销</button>
<button class="category-btn">工具</button>
<button class="category-btn">模板</button>
</div>
</div>
</section>
<!-- 资源列表 -->
<section class="container">
<h2 style="text-align: center; margin-bottom: 30px;">热门资源</h2>
<div class="resources-grid">
<!-- 资源卡片1 -->
<div class="resource-card">
<div class="card-img">
<i class="fas fa-palette"></i>
</div>
<div class="card-content">
<h3>UI设计资源包</h3>
<p>包含200+精美UI组件和模板，适合各种类型的应用程序设计。</p>
<div class="meta">
<span><i class="fas fa-download"></i> 1284</span>
<span><i class="fas fa-calendar"></i> 2023-10-15</span>
</div>
</div>
</div>
<!-- 资源卡片2 -->
<div class="resource-card">
<div class="card-img">
<i class="fas fa-code"></i>
</div>
<div class="card-content">
<h3>React组件库</h3>
<p>一套高质量的React UI组件，帮助您快速构建企业级应用。</p>
<div class="meta">
<span><i class="fas fa-download"></i> 985</span>
<span><i class="fas fa-calendar"></i> 2023-09-28</span>
</div>
</div>
</div>
<!-- 资源卡片3 -->
<div class="resource-card">
<div class="card-img">
<i class="fas fa-chart-line"></i>
</div>
<div class="card-content">
<h3>数据分析模板</h3>
<p>专业的数据分析和可视化模板，支持Excel和Google Sheets。</p>
<div class="meta">
<span><i class="fas fa-download"></i> 756</span>
<span><i class="fas fa-calendar"></i> 2023-10-05</span>
</div>
</div>
</div>
<!-- 资源卡片4 -->
<div class="resource-card">
<div class="card-img">
<i class="fas fa-video"></i>
</div>
<div class="card-content">
<h3>视频制作素材包</h3>
<p>包含转场、字幕、背景音乐等高质量视频制作素材。</p>
<div class="meta">
<span><i class="fas fa-download"></i> 1123</span>
<span><i class="fas fa-calendar"></i> 2023-10-18</span>
</div>
</div>
</div>
<!-- 资源卡片5 -->
<div class="resource-card">
<div class="card-img">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="card-content">
<h3>移动应用UI套件</h3>
<p>专为移动应用设计的UI套件，包含iOS和Android风格组件。</p>
<div class="meta">
<span><i class="fas fa-download"></i> 876</span>
<span><i class="fas fa-calendar"></i> 2023-09-20</span>
</div>
</div>
</div>
<!-- 资源卡片6 -->
<div class="resource-card">
<div class="card-img">
<i class="fas fa-image"></i>
</div>
<div class="card-content">
<h3>高清图片资源</h3>
<p>5000+张高清无版权图片，适合商业和个人项目使用。</p>
<div class="meta">
<span><i class="fas fa-download"></i> 2045</span>
<span><i class="fas fa-calendar"></i> 2023-10-10</span>
</div>
</div>
</div>
</div>
</section>
<!-- 底部 -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>关于我们</h3>
<p>ResourceHub致力于为用户提供高质量的资源分享平台，帮助创作者和开发者更高效地工作。</p>
</div>
<div class="footer-section">
<h3>联系我们</h3>
<p>Email: contact@resourcehub.com</p>
<p>电话: 0123-456789</p>
</div>
<div class="footer-section">
<h3>关注我们</h3>
<p>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 ResourceHub - 您的资源发布中心。保留所有权利。</p>
</div>
</div>
</footer>
<script>
// 简单的分类筛选功能
document.querySelectorAll('.category-btn').forEach(button => {
button.addEventListener('click', function() {
// 移除之前选中的按钮的active类
document.querySelectorAll('.category-btn').forEach(btn => {
btn.classList.remove('active');
});
// 为当前点击的按钮添加active类
this.classList.add('active');
// 这里可以添加实际的筛选逻辑
console.log('筛选类别: ' + this.textContent);
});
}); </script></body></html>功能特点
现代化设计：采用卡片式布局和渐变色彩，视觉效果出色
响应式布局：在手机、平板和电脑上都能良好显示
资源分类：提供多种资源分类筛选功能
搜索功能：顶部设有明显的搜索区域
资源展示：清晰展示每个资源的标题、描述和下载信息
交互效果：卡片悬停效果和分类按钮交互
<< 上一篇
下一篇 >>
网友留言（0 条）