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

模仿开源中国的首页写一个网页 !DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableyestitleOSCHINA - 开源中国社区 | 仿写首页 · 致敬开源/title!-- 引入 Font Awesome 6 免费图标库增强导航和排版细节 --link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.cssstyle* {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/headbodydiv classtop-bannerspan AI 造物 · 一站式终端产品化解决方案上线 /spana href#即刻探索 →/a nbsp;|nbsp; a href#模力方舟(Gitee AI) 大模型托管平台/a/divheader classmain-headerdiv classcontainer header-containerdiv classlogo-areadiv classlogoOSCHINA small开源中国/small/div/divdiv classsearch-wrapperinput typetext placeholder在 98000 开源软件中搜索...buttoni classfas fa-search/i 搜索/button/divdiv classnav-menua href# classactive首页/aa href#开源软件/aa href#问答/aa href#动弹/aa href#博客/aa href#码云/aa href#AI 造物/aa href#活动/a/divdiv classuser-actionsa href# classpost-btni classfas fa-pen-fancy/i 投稿/aa href#i classfar fa-bell/i/adiv classavatar-iconC/div/div/div/headermain classcontainer main-grid!-- 左侧内容区域 --div classleft-contentdiv classai-tab-navdiv classai-tab activeAI推荐 span classai-badgeGenerated by AI, curated by humans/span/divdiv classai-tab最新软件/divdiv classai-tab周榜热读/div/div!-- 动态新闻列表 (模仿社区风格) --div classnews-listarticle classnews-itemdiv classnews-titlea href#Spring Framework 6.2 正式发布全面拥抱 AOT 与 GraalVM/a/divdiv classnews-metaspani classfar fa-user/i 芋道源码/spanspani classfar fa-clock/i 3 小时前/spanspani classfar fa-comment/i 23 评论/span/divdiv classnews-summary本次里程碑式更新带来了显著的启动性能提升AOT处理模型更加完善Native Image 支持进一步增强。官方表示这将是 Spring 6.x 生态中最重要的版本之一……/divdiv classtag-groupspan classtag#Java/spanspan classtag#SpringBoot/spanspan classtag#云原生/span/div/articlearticle classnews-itemdiv classnews-titlea href#开源中国全新改版AI 推荐引擎 阅读榜单让技术信息更聪明/a/divdiv classnews-metaspani classfar fa-user/i 红薯/spanspani classfar fa-clock/i 昨天/spanspani classfar fa-comment/i 56 评论/span/divdiv classnews-summary通过AI智能推荐系统分析开发者的行为轨迹和阅读习惯结合对整站内容的打分机制精准推送最相关、最高质量的技术文章。同时新上线的「阅读榜单」汇总周榜/月榜精华内容……/divdiv classtag-groupspan classtag#AI/spanspan classtag#社区更新/spanspan classtag#大模型/span/div/articlearticle classnews-itemdiv classnews-titlea href#Llama 3.2 开源生态报告小型设备上的多模态 AI 成为热潮/a/divdiv classnews-metaspani classfar fa-user/i 声网Agora/spanspani classfar fa-clock/i 2 天前/spanspani classfar fa-comment/i 12 评论/span/divdiv classnews-summary基于开源中国 1800 万开发者数据调研轻量化模型在边缘端的应用逐渐爆发超过 62% 的开发者正在尝试或计划使用开源 LLM 构建 AI Agent。/divdiv classtag-groupspan classtag#人工智能/spanspan classtag#Llama/spanspan classtag#开源模型/span/div/articlearticle classnews-itemdiv classnews-titlea href#Gitee 年度报告发布中国开源贡献者激增 35%鸿蒙生态项目暴涨/a/divdiv classnews-metaspani classfar fa-user/i OSCHINA 编辑部/spanspani classfar fa-clock/i 4 天前/spanspani classfar fa-comment/i 34 评论/span/divdiv classnews-summary2025年度数据显示Gitee平台新注册开发者突破280万华为、阿里、百度等科技巨头主导的开源项目贡献显著国产基础软件库同比翻倍。/divdiv classtag-groupspan classtag#Gitee/spanspan classtag#开源报告/spanspan classtag#数字经济/span/div/articlearticle classnews-itemdiv classnews-titlea href#DevFM 技术音频助手正式亮相通勤路上也能「听」技术干货/a/divdiv classnews-metaspani classfar fa-user/i 菠萝的海子/spanspani classfar fa-clock/i 5 天前/spanspani classfar fa-comment/i 21 评论/span/divdiv classnews-summary首个专为程序员打造的技术播客引擎可将文本转换为高质量 AI 语音支持听文章、听榜单解放双眼现已集成至 OSCHINA 移动端。/divdiv classtag-groupspan classtag#AI音频/spanspan classtag#DevFM/span/div/article/div!-- 加载更多按钮 --div styletext-align: center; margin-top: 42px;a href# stylebackground: #eaf2e6; padding: 8px 28px; border-radius: 40px; text-decoration: none; color: #2d6a2a;加载更多资讯 i classfas fa-arrow-down/i/a/div/div!-- 右侧边栏 --div classright-sidebar!-- 近期热门软件 --div classsidebar-carddiv classcard-headeri classfas fa-cube/i 热门软件 · 本周飙升/divul classsoftware-listlispan classsoftware-nameDeepSeek-Coder-v2/spanspan classhot-rank 287%/span/lilispan classsoftware-nameNacos 3.2/spanspan classhot-rank 142%/span/lilispan classsoftware-nameHertzBeat 1.6/spanspan classhot-rank↑ 89%/span/lilispan classsoftware-nameMaxKB/spanspan classhot-rank 推荐/span/lilispan classsoftware-nameFastGPT 4.8/spanspan classhot-rank热门/span/li/ul/div!-- AI 造物 模力方舟 入口 --div classsidebar-card stylebackground: linear-gradient(105deg, #ffffff 0%, #f4fcf0 100%);div classcard-headeri classfas fa-microchip/i 开源 × AI 平台/divdiv stylepadding: 18px 20px;div stylefont-weight: 600; margin-bottom: 8px;i classfas fa-robot/i AI 造物社区/divp stylefont-size: 0.75rem; color: #566b52; margin-bottom: 15px;将创意快速转化为可量产的实体产品方案选型→成品落地一站式实现。/pdiv stylefont-weight: 600; margin: 12px 0 6px;⚡ 模力方舟 · Gitee AI/divp stylefont-size: 0.7rem; color: #4b6e46;本土化大模型服务平台开源模型/数据集/推理体验。/pa href# styledisplay: 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 classsidebar-carddiv classcard-headeri classfas fa-chart-simple/i 阅读榜单 · AI精选/divul classrank-listlispan1. 从Transformer到MoE大模型架构演变史/spanspan classhot-rank周榜/span/lilispan2. 2025 中国开源开发者生态报告全文/spanspan classhot-rank 月榜/span/lilispan3. 云原生周报K8s 1.31 新特性抢鲜/spanspan classhot-rank精华/span/lilispan4. 用Rust重构基础设施关键路径思考/spanspan classhot-rank推荐/span/lilispan5. Spring AI 集成向量数据库实战/spanspan classhot-rank热门/span/li/ul/div!-- 社区动态动弹 直播预告 --div classsidebar-carddiv classcard-headeri classfas fa-comment-dots/i 社区 · 动态/divdiv classosc-tweetdivspan classtweet-avatari classfas fa-code/i/span strong码农小北/strong : 终于调试通了golang的泛型舒服了/divdiv classtweet-texti classfar fa-heart/i 32 nbsp; i classfar fa-message/i 6/div/divdiv classosc-tweetdivspan classtweet-avatari classfas fa-microphone-alt/i/span strongOSC直播君/strong : 明晚 8 点「AI Infra 从开源模型到生产落地」/divdiv classtweet-text 嘉宾张奇Gitee AI 技术负责人nbsp;nbsp;span stylebackground:#e0f0dc; padding:2px 10px; border-radius: 40px;预约直播/span/div/divdiv classosc-tweetdivspan classtweet-avatari classfab fa-github-alt/i/span strong神秘程序员/strong : 推荐一个轻量级监控 HertzBeat国产开源真的好用/divdiv classtweet-text#开源软件推荐 #监控/div/div/div/div/main!-- 底部信息区 --footer classmain-footerdiv classcontainerdiv classfooter-linksa href#关于我们/aa href#开源软件库/aa href#社区公约/aa href#招聘/aa href#广告合作/aa href#官方微博/aa href#微信公众号/aa href#APP 下载/a/divdiv classfooter-copyrighti classfar fa-copyright/i 2008-2025 OSCHINA.net 开源中国社区 · 粤ICP备15089918号br本页面为致敬开源中国首页风格设计与精神非官方版本仅做布局与视觉示例。/div/div/footer/body/html