最终效果预览

我们将创建一个包含以下元素的新闻页面：

CSS制作简单新闻网页
（图片来源网络，侵删）
  1. 顶部导航栏：带有网站Logo和主导航链接。
  2. 区：
    • 一个头条新闻区域,突出显示最重要的新闻。
    • 一个新闻列表,展示其他新闻条目。
  3. 侧边栏：包含热门文章或分类。
  4. 页脚：版权信息和链接。

下面是最终的成品截图,你可以参考这个视觉效果来理解下面的代码。

第一步：HTML 结构

我们用语义化的HTML标签来搭建页面的骨架，这个结构清晰,也方便CSS进行样式选择。

<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="main-header">
        <div class="logo">
            <h1>每日新闻</h1>
        </div>
        <nav class="main-nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">国内</a></li>
                <li><a href="#">国际</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <div class="container">
        <!-- 主要内容区 -->
        <main class="main-content">
            <!-- 头条新闻 -->
            <article class="featured-news">
                <img src="https://via.placeholder.com/800x450.png?text=头条新闻图片" alt="头条新闻配图">
                <div class="featured-content">
                    <span class="category">科技</span>
                    <h2>人工智能在医疗领域取得重大突破</h2>
                    <p class="excerpt">研究人员宣布，一种新型AI诊断系统在早期癌症检测上的准确率已达到99%，这将为全球数百万患者带来新的希望...</p>
                    <a href="#" class="read-more">阅读全文 →</a>
                </div>
            </article>
            <!-- 新闻列表 -->
            <section class="news-list">
                <article class="news-item">
                    <img src="https://via.placeholder.com/200x150.png?text=新闻图片1" alt="新闻图片">
                    <div class="news-content">
                        <span class="category">国际</span>
                        <h3>全球气候峰会达成新的减排协议</h3>
                        <p class="excerpt">经过两周的激烈谈判，各国代表终于就未来十年的减排目标达成一致，承诺共同努力应对气候变化挑战...</p>
                        <div class="meta-info">
                            <span class="author">作者：张三</span>
                            <span class="date">2025-10-27</span>
                        </div>
                    </div>
                </article>
                <article class="news-item">
                    <img src="https://via.placeholder.com/200x150.png?text=新闻图片2" alt="新闻图片">
                    <div class="news-content">
                        <span class="category">体育</span>
                        <h3>国足新帅亮相，发布会阐述执教理念</h3>
                        <p class="excerpt">新任国家队主教练在首次新闻发布会上表示，将致力于打造一支有战斗力和凝聚力的队伍，目标直指世界杯...</p>
                        <div class="meta-info">
                            <span class="author">作者：李四</span>
                            <span class="date">2025-10-26</span>
                        </div>
                    </div>
                </article>
                <article class="news-item">
                    <img src="https://via.placeholder.com/200x150.png?text=新闻图片3" alt="新闻图片">
                    <div class="news-content">
                        <span class="category">经济</span>
                        <h3>第三季度GDP增长超预期，市场信心提振</h3>
                        <p class="excerpt">最新公布的经济数据显示，我国第三季度GDP同比增长5.2%，超出市场预期，显示出经济复苏的良好势头...</p>
                        <div class="meta-info">
                            <span class="author">作者：王五</span>
                            <span class="date">2025-10-25</span>
                        </div>
                    </div>
                </article>
            </section>
        </main>
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-section">
                <h3>热门文章</h3>
                <ol>
                    <li><a href="#">1. 如何提升工作效率的10个技巧</a></li>
                    <li><a href="#">2. 未来十年，这五个行业最值得投资</a></li>
                    <li><a href="#">3. 健康饮食的误区，你中招了吗？</a></li>
                    <li><a href="#">4. 深度解析：元宇宙到底是什么？</a></li>
                    <li><a href="#">5. 推荐几部必看的经典科幻电影</a></li>
                </ol>
            </div>
            <div class="sidebar-section">
                <h3>订阅我们</h3>
                <p>获取每日最新资讯，直接发送到您的邮箱。</p>
                <form action="#">
                    <input type="email" placeholder="请输入您的邮箱">
                    <button type="submit">订阅</button>
                </form>
            </div>
        </aside>
    </div>
    <!-- 页脚 -->
    <footer class="main-footer">
        <p>&copy; 2025 每日新闻. 保留所有权利.</p>
    </footer>
</body>
</html>

第二步：CSS 样式

我们创建 style.css 文件，为上面的HTML结构添加样式,我们将分块进行样式设计。

/* style.css */
/* --- 1. 基础样式和变量 --- */
:root {
    --primary-color: #0056b3;
    --secondary-color: #f4f4f4;
    --text-color: #333;
    --light-gray: #e0e0e0;
    --border-color: #ddd;
    --font-family: 'Noto Sans SC', sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
h1, h2, h3 {
    margin-bottom: 15px;
    color: #222;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* --- 2. 顶部导航栏 --- */
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo h1 {
    font-size: 1.8rem;
    color: var(--primary-color);
}
.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav ul li {
    margin-left: 25px;
}
.main-nav a {
    font-weight: 500;
    color: var(--text-color);
    transition: color 0.3s ease;
}
.main-nav a:hover {
    color: var(--primary-color);
}
/* --- 3. 主要内容区 --- */
.main-content {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}
/* 头条新闻 */
.featured-news {
    background-color: var(--secondary-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap; /* 在小屏幕上换行 */
}
.featured-news img {
    width: 50%;
    flex: 1 1 50%; /* 允许收缩，基础宽度50% */
    object-fit: cover;
}
.featured-content {
    flex: 1 1 50%; /* 允许收缩，基础宽度50% */
    padding: 25px;
}
.category {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 10px;
}
.featured-news h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.featured-news .excerpt {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
}
.read-more {
    display: inline-block;
    font-weight: 500;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 3px;
    transition: all 0.3s ease;
}
.read-more:hover {
    border-bottom-color: transparent;
}
/* 新闻列表 */
.news-list {
    flex: 3; /* 占据主要空间 */
}
.news-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}
.news-item:last-child {
    border-bottom: none;
}
.news-item img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0; /* 防止图片被压缩 */
}
.news-content {
    flex: 1;
}
.news-content h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.news-content .excerpt {
    color: #555;
    margin-bottom: 15px;
}
.meta-info {
    font-size: 0.9rem;
    color: #777;
}
.meta-info span {
    margin-right: 15px;
}
/* --- 4. 侧边栏 --- */
.sidebar {
    flex: 1; /* 占据剩余空间 */
    background-color: var(--secondary-color);
    padding: 20px;
    border-radius: 8px;
    height: fit-content; /* 防止侧边栏过高 */
}
.sidebar-section {
    margin-bottom: 30px;
}
.sidebar-section h3 {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}
.sidebar-section ol {
    list-style: none;
    padding-left: 0;
}
.sidebar-section ol li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}
.sidebar-section ol li:last-child {
    border-bottom: none;
}
.sidebar-section ol li a {
    color: var(--text-color);
    transition: color 0.3s ease;
}
.sidebar-section ol li a:hover {
    color: var(--primary-color);
}
/* 订阅表单 */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
form input {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
form button {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
form button:hover {
    background-color: #004494;
}
/* --- 5. 页脚 --- */
.main-footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}
/* --- 6. 响应式设计 --- */
@media (max-width: 968px) {
    .main-content {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .featured-news {
        flex-direction: column;
    }
    .featured-news img, .featured-content {
        flex: 1 1 100%;
        width: 100%;
    }
    .news-item {
        flex-direction: column;
    }
    .news-item img {
        width: 100%;
        height: 200px;
    }
    .main-header .container {
        flex-direction: column;
        gap: 15px;
    }
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    .main-nav ul li {
        margin: 5px 15px;
    }
}

代码讲解

  1. *基础设置 (root, `body`)**:

    CSS制作简单新闻网页
    （图片来源网络，侵删）
    • root 定义了CSS变量，方便统一管理颜色、字体等主题,修改这里可以快速改变整个网站的配色方案。
    • * { box-sizing: border-box; } 是一个非常重要的设置，它让元素的 width 和 height 属性包含其 padding 和 border,使得布局计算更直观。
    • body 设置了全局的字体、行高和背景色。

  2. 顶部导航栏 (main-header):

    • 使用了 display: flex 将Logo和导航菜单水平排列。
    • position: sticky; 让导航栏在滚动时能“粘”在页面顶部,提升用户体验。
    • transition 为链接添加了悬停时的平滑颜色变化效果。

  3. 区 (main-content):

    • display: flex; 将主内容区和侧边栏并排显示。
    • 头条新闻 (featured-news): 使用了 flex-wrap: wrap 和 flex: 1 1 50% 的组合，使得图片和内容在大屏幕上并排,在小屏幕上自动换堆叠。
    • 新闻列表 (news-list): 每个新闻条目（.news-item）同样使用 flex 布局,让图片和内容并排。

  4. 侧边栏 (sidebar):

    • flex: 1; 让它自动占据剩余的空间。
    • height: fit-content; 确保侧边栏的高度由其内容决定,不会无故拉伸。

  5. 响应式设计 (@media):

    CSS制作简单新闻网页
    （图片来源网络，侵删）
    • 这是现代网页设计的核心，通过 @media 查询，我们可以为不同宽度的屏幕（如手机、平板、桌面）提供不同的布局。
    • 在小屏幕上，我们将并排的布局（如主内容区和侧边栏、头条新闻的图文）改为垂直堆叠,确保内容在手机上也能良好显示。

如何运行

  1. 将上面的HTML代码保存为一个文件，index.html。
  2. 将上面的CSS代码保存为一个文件，style.css。
  3. 确保这两个文件在同一个文件夹下。
  4. 用任何现代浏览器（如Chrome, Firefox, Edge）打开 index.html 文件,你就能看到最终的新闻网页效果了。

这个例子涵盖了CSS布局、样式、响应式设计和简单交互等核心知识点，是学习CSS制作网页的一个非常好的起点，你可以在此基础上，继续添加更多功能，比如搜索框、评论区等。