模仿开源中国的首页写一个网页

2501_91812691

185人浏览 · 2026-06-08 00:05:29

2501_91812691 · 2026-06-08 00:05:29 发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>OSCHINA - 开源中国社区 | 仿写首页 · 致敬开源</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #f4f7f2; /* 整体背景柔和 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
color: #1e2a2e;
line-height: 1.5;
}

/* 容器最大宽度，模拟主流社区布局 */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 28px;
}

/* ========= 顶部广告/公告栏 ========= */
.top-banner {
background: #eaf6e4;
border-bottom: 1px solid #cce3c2;
font-size: 0.85rem;
text-align: center;
padding: 8px 0;
color: #2c6e2f;
}
.top-banner a {
color: #2c6e2f;
text-decoration: underline;
font-weight: 500;
}
.top-banner a:hover {
color: #1f4f21;
}

/* ========= 主头部导航 ========= */
.main-header {
background: #ffffff;
border-bottom: 1px solid #e2efe0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
position: sticky;
top: 0;
z-index: 100;
}

.header-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 12px 0;
gap: 20px;
}

.logo-area {
display: flex;
align-items: center;
gap: 12px;
}
.logo {
font-size: 1.9rem;
font-weight: 700;
background: linear-gradient(135deg, #358c3b, #60b860);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.5px;
}
.logo small {
font-size: 0.75rem;
background: none;
color: #5e8c5a;
font-weight: 400;
}

/* 搜索框 */
.search-wrapper {
flex: 1;
max-width: 400px;
display: flex;
background: #f8faf6;
border: 1px solid #cfdec8;
border-radius: 48px;
overflow: hidden;
}
.search-wrapper input {
flex: 1;
border: none;
padding: 10px 18px;
background: transparent;
outline: none;
font-size: 0.9rem;
}
.search-wrapper button {
background: #358c3b;
border: none;
color: white;
padding: 0 20px;
cursor: pointer;
font-weight: 500;
transition: 0.2s;
}
.search-wrapper button:hover {
background: #2a6f2f;
}

/* 导航菜单 */
.nav-menu {
display: flex;
gap: 24px;
font-weight: 500;
flex-wrap: wrap;
}
.nav-menu a {
text-decoration: none;
color: #2c4c2c;
font-size: 1rem;
transition: 0.2s;
}
.nav-menu a:hover {
color: #358c3b;
}
.nav-menu .active {
color: #358c3b;
border-bottom: 2px solid #358c3b;
padding-bottom: 4px;
}

/* 用户操作区 */
.user-actions {
display: flex;
align-items: center;
gap: 18px;
}
.user-actions a {
color: #5a7256;
font-size: 0.9rem;
text-decoration: none;
}
.user-actions .post-btn {
background: #eaf4e5;
padding: 6px 16px;
border-radius: 40px;
font-weight: 500;
}
.avatar-icon {
width: 32px;
height: 32px;
background: #cde2c7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #2a6b2a;
}

/* ========= 主体网格布局 (两栏) ========= */
.main-grid {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
margin: 40px 0;
}

/* 左侧主内容区 */
.left-content {
background: transparent;
}

/* AI 推荐 Tab 模块 */
.ai-tab-nav {
display: flex;
gap: 28px;
border-bottom: 2px solid #e0efdb;
margin-bottom: 24px;
flex-wrap: wrap;
}
.ai-tab {
font-size: 1.2rem;
font-weight: 600;
padding: 8px 0 12px 0;
color: #5a6e56;
cursor: default;
}
.ai-tab.active {
color: #358c3b;
border-bottom: 3px solid #358c3b;
}
.ai-badge {
background: #eef5eb;
border-radius: 20px;
font-size: 0.7rem;
padding: 2px 12px;
margin-left: 10px;
font-weight: 400;
color: #447c41;
}

/* 资讯列表样式 (卡片简约) */
.news-list {
display: flex;
flex-direction: column;
gap: 26px;
}
.news-item {
background: #ffffff;
border-radius: 20px;
padding: 18px 22px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
border: 1px solid #e5f0e2;
transition: 0.2s;
}
.news-item:hover {
border-color: #c8e0c0;
box-shadow: 0 8px 18px rgba(53, 140, 59, 0.08);
}
.news-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
}
.news-title a {
text-decoration: none;
color: #1a2a1a;
}
.news-title a:hover {
color: #358c3b;
}
.news-meta {
display: flex;
gap: 20px;
font-size: 0.75rem;
color: #7b8a76;
margin-bottom: 12px;
flex-wrap: wrap;
}
.news-meta i {
margin-right: 4px;
}
.news-summary {
color: #3f4d3c;
font-size: 0.9rem;
line-height: 1.45;
margin-bottom: 12px;
}
.tag-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.tag {
background: #f0f7ed;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.7rem;
color: #2a6b2a;
}

/* 右侧边栏 */
.right-sidebar {
display: flex;
flex-direction: column;
gap: 32px;
}

/* 通用卡片模块 */
.sidebar-card {
background: #ffffff;
border-radius: 24px;
border: 1px solid #e2efdf;
overflow: hidden;
padding: 0 0 16px 0;
}
.card-header {
padding: 14px 20px;
border-bottom: 1px solid #ecf3e9;
font-weight: 700;
font-size: 1rem;
background: #fefefc;
}
.card-header i {
color: #358c3b;
margin-right: 8px;
}
.software-list, .rank-list {
list-style: none;
}
.software-list li, .rank-list li {
padding: 12px 20px;
border-bottom: 1px solid #f0f5ee;
display: flex;
justify-content: space-between;
align-items: center;
}
.software-name {
font-weight: 500;
color: #2a5930;
}
.hot-rank {
background: #eef3eb;
border-radius: 16px;
font-size: 0.7rem;
padding: 2px 8px;
color: #4b7a45;
}

/* 社区动态（动弹/直播） */
.osc-tweet {
padding: 12px 20px;
border-bottom: 1px solid #f1f7ef;
}
.tweet-avatar {
width: 32px;
height: 32px;
background: #bddbb4;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.tweet-text {
font-size: 0.85rem;
color: #2f402c;
line-height: 1.4;
}

/* 底部信息 */
.main-footer {
background: #e7f2e3;
border-top: 1px solid #cfe0c9;
padding: 40px 0 32px;
margin-top: 20px;
color: #415e3e;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 38px;
justify-content: center;
margin-bottom: 24px;
}
.footer-links a {
text-decoration: none;
color: #2c5a2a;
font-size: 0.85rem;
}
.footer-copyright {
text-align: center;
font-size: 0.75rem;
opacity: 0.7;
}

/* 响应式适配 */
@media (max-width: 860px) {
.main-grid {
grid-template-columns: 1fr;
}
.header-container {
flex-direction: column;
align-items: stretch;
}
.search-wrapper {
max-width: 100%;
}
}
</style>
</head>
<body>

<div class="top-banner">
<span>🔥 AI 造物 · 一站式终端产品化解决方案上线！ </span>
<a href="#">即刻探索 →</a>  |  <a href="#">模力方舟(Gitee AI) 大模型托管平台</a>
</div>

<header class="main-header">
<div class="container header-container">
<div class="logo-area">
<div class="logo">
OSCHINA <small>开源中国</small>
</div>
</div>
<div class="search-wrapper">
<input type="text" placeholder="在 98000+ 开源软件中搜索...">
<button><i class="fas fa-search"></i> 搜索</button>
</div>
<div class="nav-menu">
<a href="#" class="active">首页</a>
<a href="#">开源软件</a>
<a href="#">问答</a>
<a href="#">动弹</a>
<a href="#">博客</a>
<a href="#">码云</a>
<a href="#">AI 造物</a>
<a href="#">活动</a>
</div>
<div class="user-actions">
<a href="#" class="post-btn"><i class="fas fa-pen-fancy"></i> 投稿</a>
<a href="#"><i class="far fa-bell"></i></a>
<div class="avatar-icon">C</div>
</div>
</div>
</header>

<main class="container main-grid">

<div class="left-content">
<div class="ai-tab-nav">
<div class="ai-tab active">AI推荐 <span class="ai-badge">Generated by AI, curated by humans</span></div>
<div class="ai-tab">最新软件</div>
<div class="ai-tab">周榜热读</div>
</div>


<div class="news-list">
<article class="news-item">
<div class="news-title"><a href="#">Spring Framework 6.2 正式发布，全面拥抱 AOT 与 GraalVM</a></div>
<div class="news-meta">
<span><i class="far fa-user"></i> 芋道源码</span>
<span><i class="far fa-clock"></i> 3 小时前</span>
<span><i class="far fa-comment"></i> 23 评论</span>
</div>
<div class="news-summary">
本次里程碑式更新带来了显著的启动性能提升，AOT处理模型更加完善，Native Image 支持进一步增强。官方表示这将是 Spring 6.x 生态中最重要的版本之一……
</div>
<div class="tag-group">
<span class="tag">#Java</span>
<span class="tag">#SpringBoot</span>
<span class="tag">#云原生</span>
</div>
</article>

<article class="news-item">
<div class="news-title"><a href="#">开源中国全新改版：AI 推荐引擎 + 阅读榜单，让技术信息更聪明</a></div>
<div class="news-meta">
<span><i class="far fa-user"></i> 红薯</span>
<span><i class="far fa-clock"></i> 昨天</span>
<span><i class="far fa-comment"></i> 56 评论</span>
</div>
<div class="news-summary">
通过AI智能推荐系统分析开发者的行为轨迹和阅读习惯，结合对整站内容的打分机制，精准推送最相关、最高质量的技术文章。同时新上线的「阅读榜单」汇总周榜/月榜精华内容……
</div>
<div class="tag-group">
<span class="tag">#AI</span>
<span class="tag">#社区更新</span>
<span class="tag">#大模型</span>
</div>
</article>

<article class="news-item">
<div class="news-title"><a href="#">Llama 3.2 开源生态报告：小型设备上的多模态 AI 成为热潮</a></div>
<div class="news-meta">
<span><i class="far fa-user"></i> 声网Agora</span>
<span><i class="far fa-clock"></i> 2 天前</span>
<span><i class="far fa-comment"></i> 12 评论</span>
</div>
<div class="news-summary">
基于开源中国 1800 万开发者数据调研，轻量化模型在边缘端的应用逐渐爆发，超过 62% 的开发者正在尝试或计划使用开源 LLM 构建 AI Agent。
</div>
<div class="tag-group">
<span class="tag">#人工智能</span>
<span class="tag">#Llama</span>
<span class="tag">#开源模型</span>
</div>
</article>

<article class="news-item">
<div class="news-title"><a href="#">Gitee 年度报告发布：中国开源贡献者激增 35%，鸿蒙生态项目暴涨</a></div>
<div class="news-meta">
<span><i class="far fa-user"></i> OSCHINA 编辑部</span>
<span><i class="far fa-clock"></i> 4 天前</span>
<span><i class="far fa-comment"></i> 34 评论</span>
</div>
<div class="news-summary">
2025年度数据显示，Gitee平台新注册开发者突破280万，华为、阿里、百度等科技巨头主导的开源项目贡献显著，国产基础软件库同比翻倍。
</div>
<div class="tag-group">
<span class="tag">#Gitee</span>
<span class="tag">#开源报告</span>
<span class="tag">#数字经济</span>
</div>
</article>

<article class="news-item">
<div class="news-title"><a href="#">DevFM 技术音频助手正式亮相：通勤路上也能「听」技术干货</a></div>
<div class="news-meta">
<span><i class="far fa-user"></i> 菠萝的海子</span>
<span><i class="far fa-clock"></i> 5 天前</span>
<span><i class="far fa-comment"></i> 21 评论</span>
</div>
<div class="news-summary">
首个专为程序员打造的技术播客引擎，可将文本转换为高质量 AI 语音，支持听文章、听榜单，解放双眼！现已集成至 OSCHINA 移动端。
</div>
<div class="tag-group">
<span class="tag">#AI音频</span>
<span class="tag">#DevFM</span>
</div>
</article>
</div>

<div style="text-align: center; margin-top: 42px;">
<a href="#" style="background: #eaf2e6; padding: 8px 28px; border-radius: 40px; text-decoration: none; color: #2d6a2a;">加载更多资讯 <i class="fas fa-arrow-down"></i></a>
</div>
</div>

<div class="right-sidebar">

<div class="sidebar-card">
<div class="card-header"><i class="fas fa-cube"></i> 热门软件 · 本周飙升</div>
<ul class="software-list">
<li><span class="software-name">DeepSeek-Coder-v2</span><span class="hot-rank">🔥 +287%</span></li>
<li><span class="software-name">Nacos 3.2</span><span class="hot-rank">🔥 +142%</span></li>
<li><span class="software-name">HertzBeat 1.6</span><span class="hot-rank">↑ 89%</span></li>
<li><span class="software-name">MaxKB</span><span class="hot-rank">🌟 推荐</span></li>
<li><span class="software-name">FastGPT 4.8</span><span class="hot-rank">热门</span></li>
</ul>
</div>


<div class="sidebar-card" style="background: linear-gradient(105deg, #ffffff 0%, #f4fcf0 100%);">
<div class="card-header"><i class="fas fa-microchip"></i> 开源 × AI 平台</div>
<div style="padding: 18px 20px;">
<div style="font-weight: 600; margin-bottom: 8px;"><i class="fas fa-robot"></i> AI 造物社区</div>
<p style="font-size: 0.75rem; color: #566b52; margin-bottom: 15px;">将创意快速转化为可量产的实体产品，方案选型→成品落地一站式实现。</p>
<div style="font-weight: 600; margin: 12px 0 6px;">⚡ 模力方舟 · Gitee AI</div>
<p style="font-size: 0.7rem; color: #4b6e46;">本土化大模型服务平台，开源模型/数据集/推理体验。</p>
<a href="#" style="display: inline-block; margin-top: 14px; background: #358c3b20; padding: 6px 18px; border-radius: 32px; font-size: 0.75rem; text-decoration: none; color: #2a6b2a;">立即体验 →</a>
</div>
</div>

<div class="sidebar-card">
<div class="card-header"><i class="fas fa-chart-simple"></i> 阅读榜单 · AI精选</div>
<ul class="rank-list">
<li><span>1. 从Transformer到MoE，大模型架构演变史</span><span class="hot-rank">周榜</span></li>
<li><span>2. 2025 中国开源开发者生态报告（全文）</span><span class="hot-rank">🔥 月榜</span></li>
<li><span>3. 云原生周报：K8s 1.31 新特性抢鲜</span><span class="hot-rank">精华</span></li>
<li><span>4. 用Rust重构基础设施：关键路径思考</span><span class="hot-rank">推荐</span></li>
<li><span>5. Spring AI 集成向量数据库实战</span><span class="hot-rank">热门</span></li>
</ul>
</div>

<div class="sidebar-card">
<div class="card-header"><i class="fas fa-comment-dots"></i> 社区 · 动态</div>
<div class="osc-tweet">
<div><span class="tweet-avatar"><i class="fas fa-code"></i></span> <strong>码农小北</strong> : 终于调试通了golang的泛型，舒服了～</div>
<div class="tweet-text"><i class="far fa-heart"></i> 32   <i class="far fa-message"></i> 6</div>
</div>
<div class="osc-tweet">
<div><span class="tweet-avatar"><i class="fas fa-microphone-alt"></i></span> <strong>OSC直播君</strong> : 明晚 8 点「AI Infra 从开源模型到生产落地」</div>
<div class="tweet-text">🎙 嘉宾：张奇（Gitee AI 技术负责人）  <span style="background:#e0f0dc; padding:2px 10px; border-radius: 40px;">预约直播</span></div>
</div>
<div class="osc-tweet">
<div><span class="tweet-avatar"><i class="fab fa-github-alt"></i></span> <strong>神秘程序员</strong> : 推荐一个轻量级监控 HertzBeat，国产开源真的好用！</div>
<div class="tweet-text">#开源软件推荐 #监控</div>
</div>
</div>
</div>
</main>

<footer class="main-footer">
<div class="container">
<div class="footer-links">
<a href="#">关于我们</a>
<a href="#">开源软件库</a>
<a href="#">社区公约</a>
<a href="#">招聘</a>
<a href="#">广告合作</a>
<a href="#">官方微博</a>
<a href="#">微信公众号</a>
<a href="#">APP 下载</a>
</div>
<div class="footer-copyright">
<i class="far fa-copyright"></i> 2008-2025 OSCHINA.net 开源中国社区 · 粤ICP备15089918号<br>
本页面为致敬开源中国首页风格设计与精神，非官方版本，仅做布局与视觉示例。
</div>
</div>
</footer>
</body>
</html>