您可以将以下代码复制到一个文本文件中,将其命名为 index.html，然后用浏览器打开即可看到效果。

html加css新闻简单网页代码
（图片来源网络，侵删）

最终效果预览

代码文件

HTML 代码 (index.html)

这个文件定义了网页的结构和内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">每日新闻</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入一个图标库，用于显示小图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>每日新闻</h1>
            <p>您的最新资讯来源</p>
        </header>
        <main>
            <article class="news-item">
                <img src="https://via.placeholder.com/800x400.png?text=新闻图片1" alt="科技新闻配图">
                <div class="news-content">
                    <h2>人工智能技术在医疗领域取得重大突破</h2>
                    <div class="news-meta">
                        <span class="author"><i class="fas fa-user"></i> 张三</span>
                        <span class="date"><i class="fas fa-calendar"></i> 2025-10-27</span>
                        <span class="category"><i class="fas fa-tag"></i> 科技</span>
                    </div>
                    <p class="summary">
                        一家领先的科技公司宣布，其最新研发的人工智能诊断系统在临床试验中表现出色，准确率超过了人类专家，这一突破性进展有望极大地提高疾病诊断的效率和准确性...
                    </p>
                    <a href="#" class="read-more">阅读全文 <i class="fas fa-arrow-right"></i></a>
                </div>
            </article>
            <article class="news-item">
                <img src="https://via.placeholder.com/800x400.png?text=新闻图片2" alt="经济新闻配图">
                <div class="news-content">
                    <h2>全球股市迎来新一轮上涨</h2>
                    <div class="news-meta">
                        <span class="author"><i class="fas fa-user"></i> 李四</span>
                        <span class="date"><i class="fas fa-calendar"></i> 2025-10-26</span>
                        <span class="category"><i class="fas fa-tag"></i> 财经</span>
                    </div>
                    <p class="summary">
                        受到多项积极经济数据的影响，全球主要股指昨日普遍上扬，分析师认为，市场对未来经济前景的乐观情绪是推动此次上涨的主要动力...
                    </p>
                    <a href="#" class="read-more">阅读全文 <i class="fas fa-arrow-right"></i></a>
                </div>
            </article>
            <article class="news-item">
                <img src="https://via.placeholder.com/800x400.png?text=新闻图片3" alt="体育新闻配图">
                <div class="news-content">
                    <h2>国家足球队成功晋级世界杯决赛圈</h2>
                    <div class="news-meta">
                        <span class="author"><i class="fas fa-user"></i> 王五</span>
                        <span class="date"><i class="fas fa-calendar"></i> 2025-10-25</span>
                        <span class="category"><i class="fas fa-tag"></i> 体育</span>
                    </div>
                    <p class="summary">
                        在昨晚的关键比赛中，国家足球队以 2:0 的比分战胜对手，成功获得下一届世界杯的参赛资格，这是球队历史上的一个重要里程碑，全国球迷欢欣鼓舞...
                    </p>
                    <a href="#" class="read-more">阅读全文 <i class="fas fa-arrow-right"></i></a>
                </div>
            </article>
        </main>
        <footer>
            <p>&copy; 2025 每日新闻. 保留所有权利.</p>
        </footer>
    </div>
</body>
</html>

CSS 代码 (style.css)

这个文件负责网页的视觉样式,包括布局、颜色、字体和间距等。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #2c3e50;    /* 主色调 */
    --secondary-color: #3498db;  /* 次要/链接色 */
    --text-color: #333;         /* 主要文字颜色 */
    --light-gray: #ecf0f1;      /* 浅灰色背景 */
    --dark-gray: #7f8c8d;       /* 深灰色（用于次要信息） */
    --border-color: #bdc3c7;    /* 边框颜色 */
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: var(--text-color);
}
.container {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
/* --- 头部样式 --- */
header {
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    border-radius: 8px 8px 0 0;
}
header h1 {
    margin: 0;
    font-size: 2.5em;
}
header p {
    margin: 10px 0 0;
    font-size: 1.1em;
    opacity: 0.9;
}
/* --- 主要内容区域 --- */
main {
    padding: 20px;
}
/* --- 新闻条目样式 --- */
.news-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 25px;
    margin-bottom: 25px;
}
.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.news-item img {
    width: 100%;
    height: 250px;
    object-fit: cover; /* 确保图片填满区域且不变形 */
    border-radius: 5px;
    margin-bottom: 15px;
}
.news-content {
    flex-grow: 1;
}
.news-content h2 {
    font-size: 1.8em;
    color: var(--primary-color);
    margin: 0 0 10px 0;
}
.news-content h2 a {
    text-decoration: none;
    color: inherit;
}
.news-content h2 a:hover {
    text-decoration: underline;
}
/* --- 元信息（作者、日期、分类） --- */
.news-meta {
    font-size: 0.9em;
    color: var(--dark-gray);
    margin-bottom: 15px;
}
.news-meta span {
    margin-right: 20px;
}
.news-meta i {
    margin-right: 5px;
}
/* --- 新闻摘要 --- */
.summary {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: #555;
}
/* --- “阅读全文”链接 --- */
.read-more {
    display: inline-block;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}
.read-more:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.read-more i {
    margin-left: 5px;
}
/* --- 页脚样式 --- */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    font-size: 0.9em;
    color: var(--dark-gray);
    border-top: 1px solid var(--border-color);
}
/* --- 响应式设计 --- */
/* 当屏幕宽度大于 600px 时，改变新闻条目的布局 */
@media (min-width: 600px) {
    .news-item {
        flex-direction: row;
        align-items: flex-start;
    }
    .news-item img {
        width: 40%; /* 图片占据40%的宽度 */
        height: auto; /* 高度自适应 */
        margin-right: 20px;
        margin-bottom: 0;
    }
    .news-content {
        width: 60%; /* 内容占据60%的宽度 */
    }
}

代码解析

HTML 结构解析

  1. <!DOCTYPE html>: 声明这是一个HTML5文档。
  2. <head>: 包含页面的元数据。
    • <meta charset="UTF-8">: 确保浏览器能正确显示中文等字符。
    • <meta name="viewport">: 确保在移动设备上有正确的缩放和布局。
    • <title>: 浏览器标签页上显示的标题。
    • `**: 将HTML文件与CSS样式表链接起来。
    • `**: 引入Font Awesome图标库，用于在作者、日期前添加小图标。
  3. <body>: 包含页面的所有可见内容。
  4. <div class="container">: 一个包裹所有内容的容器，用于限制页面最大宽度和居中显示。
  5. <header>: 页面的头部，通常包含网站标题和标语。
  6. <main>: 页面的主要内容区域。
  7. <article>: 代表一篇独立的、完整的文章内容，每个<article>代表一条新闻。
    • <img>: 新闻的配图。
    • `
      **: 包含新闻的文字内容。
    • <h2>: 新闻标题。
    • `
      **: 新闻的元数据，如作者、日期、分类。
    • `

      **: 新闻摘要。

    • `**: “阅读全文”的链接。
  8. <footer>: 页面的页脚，通常包含版权信息。

CSS 样式解析

  1. root 和 var(): 使用CSS变量定义颜色，方便全局修改和维护。
  2. body: 设置了整个页面的基础字体、背景色和文字颜色。
  3. .container: 通过 max-width 和 margin: 0 auto 实现了内容区域的居中和最大宽度限制，box-shadow 增加了阴影效果，让页面更有层次感。
  4. header: 设置了深色背景和白色文字，使标题醒目。
  5. .news-item: 这是每条新闻的样式。
    • display: flex;: 使用Flexbox布局，这使得图片和内容可以灵活地排列。
    • flex-direction: column;: 默认情况下，图片在上，内容在下垂直排列。
  6. .news-item img: object-fit: cover 是一个非常实用的CSS属性，它能让图片在保持宽高比的同时，填满整个容器，避免图片被拉伸或留白。
  7. .news-meta span: 使用 margin-right 来分隔作者、日期和分类信息。
  8. .read-more: 设置链接样式，并使用 transition 实现鼠标悬停时的平滑颜色变化效果。
  9. @media (min-width: 600px): 这是响应式设计的关键，当浏览器窗口宽度大于600像素时，这个媒体查询里的样式会生效。
    • flex-direction: row;: 将新闻条目的布局从垂直改为水平排列。
    • 调整图片和内容区域的宽度比例（width: 40% 和 width: 60%），使页面在宽屏上看起来更舒服。

如何使用

  1. 创建一个新的文件夹,news-website。
  2. 在文件夹中创建两个文件：index.html 和 style.css。
  3. 将上面的HTML代码完整地复制到 index.html 文件中。
  4. 将上面的CSS代码完整地复制到 style.css 文件中。
  5. 保存两个文件。
  6. 用任何现代浏览器（如Chrome, Firefox, Edge）打开 index.html 文件，你就可以看到这个简单的新闻网页了，你可以尝试调整浏览器窗口的大小，观察布局的变化。
html加css新闻简单网页代码
（图片来源网络，侵删）