晨阅 MorningRead 新闻资讯门户 HTML 单页源码

这是一个模仿传统报纸排版、融合现代卡片式设计的资讯门户单页模板。整体采用正红与深灰的报媒配色，顶部有时间天气条和频道导航，首屏突出头条大图，右侧设置热榜 TOP5，下方以网格形式展示多篇推荐文章，信息密度高但结构不乱。

页面在响应式上做了充分适配：桌面端呈现三栏或两栏布局，平板端自动压缩为两栏，手机端则转为单列流式布局，保证不同设备下阅读体验一致。标签、分类、时间、摘要等元信息完整，便于搜索引擎抓取。

非常适合地方资讯站、行业垂直媒体、校园新闻网或自媒体聚合页作为首页原型。替换文章标题、图片和分类后，就能快速上线一个看起来专业的新闻门户首页。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>晨阅 MorningRead · 资讯门户</title>
<style>
:root{
  --bg:#f6f5f3; --card:#fff; --ink:#1a1a1a; --sub:#6b6b6b;
  --acc:#d8232a; --line:#e7e5e1;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.6;padding-bottom:40px}
.masthead{border-bottom:3px solid var(--ink);padding:18px 16px 14px;text-align:center}
.masthead .date{font-size:12px;color:var(--sub);letter-spacing:2px}
.masthead h1{font-size:40px;font-weight:900;letter-spacing:6px;margin:4px 0}
.nav{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.nav a{color:var(--ink);text-decoration:none}.nav a:hover{color:var(--acc)}
.wrap{max-width:1000px;margin:22px auto;padding:0 16px;display:grid;grid-template-columns:1.6fr 1fr;gap:26px}
.lead{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lead .ph{height:230px;background:linear-gradient(135deg,#2b2b2b,#4a4a4a);display:flex;align-items:flex-end;padding:16px;color:#fff}
.lead .ph span{background:var(--acc);padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700}
.lead .bd{padding:18px}
.lead h2{font-size:24px;margin-bottom:8px}
.lead p{color:var(--sub);font-size:14px}
.lead .more{display:inline-block;margin-top:12px;color:var(--acc);font-weight:700;font-size:14px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.story{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.story h3{font-size:16px;margin-bottom:6px}
.story p{color:var(--sub);font-size:13px}
.side{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.side h3{font-size:16px;border-bottom:2px solid var(--acc);display:inline-block;padding-bottom:6px;margin-bottom:14px}
.rank{list-style:none;counter-reset:n}
.rank li{counter-increment:n;display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.rank li::before{content:counter(n);font-weight:900;color:var(--acc);font-size:16px;min-width:18px}
.tag{display:inline-block;background:#f0efed;color:var(--sub);font-size:11px;padding:3px 8px;border-radius:6px;margin:4px 4px 0 0}
.foot{text-align:center;color:var(--sub);font-size:12px;margin-top:30px;border-top:1px solid var(--line);padding-top:18px}
@media(max-width:800px){.wrap{grid-template-columns:1fr}.cols{grid-template-columns:1fr}}
</style>
</head>
<body>
<header class="masthead">
  <div class="date">2026 年 8 月 10 日 · 星期一 · 多云转晴</div>
  <h1>晨 阅</h1>
</header>
<nav class="nav">
  <a href="#">头条</a><a href="#">科技</a><a href="#">财经</a><a href="#">城市</a>
  <a href="#">文化</a><a href="#">生活</a><a href="#">观点</a>
</nav>

<div class="wrap">
  <main>
    <article class="lead">
      <div class="ph"><span>头条</span></div>
      <div class="bd">
        <h2>城市夜经济再升级：十二座商圈试点延时营业</h2>
        <p>为提振消费活力，多地推出夜间消费券与公共交通接驳方案，预计带动周边餐饮零售环比增长两成以上……</p>
        <a class="more" href="#">阅读全文 ›</a>
        <div style="margin-top:12px">
          <span class="tag">夜经济</span><span class="tag">消费券</span><span class="tag">城市更新</span>
        </div>
      </div>
    </article>

    <div class="cols">
      <article class="story"><h3>国产大模型推理成本一年下降九成</h3><p>随着芯片与架构优化，多家厂商把单位 token 成本压到新低，中小企业接入门槛大幅降低。</p></article>
      <article class="story"><h3>老旧小区加装电梯迎来新补贴</h3><p>多地出台阶梯式财政补贴，并简化审批流程，惠及数百万高层住宅居民。</p></article>
      <article class="story"><h3>暑期文博热：小众博物馆出圈</h3><p>借助短视频与文创联名，一批县级博物馆客流翻倍，带动周边文旅消费。</p></article>
      <article class="story"><h3>新能源车下乡车型目录扩容</h3><p>续航与售后双提升，农村充电网络同步铺开，购车补贴叠加地方消费券。</p></article>
    </div>
  </main>

  <aside class="side">
    <h3>热榜 TOP 5</h3>
    <ol class="rank">
      <li>台风路径最新预报：东南沿海需防范</li>
      <li>数字人民币试点扩围至更多城市</li>
      <li>高校毕业生就业服务月启动</li>
      <li>夏季用电高峰 电网平稳度夏</li>
      <li>非遗市集本周末登陆中央公园</li>
    </ol>
    <div style="margin-top:16px">
      <span class="tag">实时</span><span class="tag">专题</span><span class="tag">图解</span><span class="tag">直播</span>
    </div>
  </aside>
</div>

<p class="foot">晨阅 MorningRead · 每日清晨为你梳理值得关注的资讯 · 本页为静态演示模板</p>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1941.html