黑马程序员前端Web开发_Day03综合案例一,二

最新推荐文章于 2025-12-15 16:38:44 发布

原创最新推荐文章于 2025-12-15 16:38:44 发布 · 327 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端Web学习记录专栏收录该内容

9 篇文章

订阅专栏

此博客主要用于本人自己温故复习,对老师讲的每段代码和思路及时记录下自己的理解,有误会会进行修改,持续更新,偶尔会分享歌曲,反正是我写给自己看的哈哈哈......

综合案例一-新闻详情

源代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例一-新闻详情</title>
    <style>
        h1 {
            color: #333;
            text-align: center;
            font-weight: 400;
            font-size: 30px;
        }

        div {
            color: #999;
            font-size: 14px;
            text-align: left;
        }

        p {
            text-indent: 2em;
            font-size: 18px;
            color: #333;
        }

        .center {
            text-align: center;
        }

        h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>官方公开9.3阅兵安排|惊喜不止新式武器,空军和海航装备也是重点</h1>
    <div>来源:腾讯新闻|2025年6月28日 11:05:23</div>
    <p> <strong>腾讯网消息:</strong>近日，国务院新闻办公室举行了新闻发布会，
        宣布了我们将于9月3日，举行中国人民抗日战争胜利，
        暨世界反法西斯战争胜利80周年阅兵式纪念活动的具体安排，此次大阅兵的看点十足，
        不仅有着极为深远的纪念意义，还有大批重量级装备会和大家见面，
        让外界的期待值直接拉满。
    </p>
    <div class="center">
        <img src="./img/9.3_news.webp" title="2015年阅兵的盛况让人印象深刻">
    </div>
    <h3>9.3阅兵有着怎样的重要意义</h3>
    <p>此次9.3阅兵意义非常深远，有着重要的现实意义，因为这不仅是一场对历史的回顾，更是一次面向现实与未来的郑重宣示。</p>
    <p>首先，这是对历史贡献的庄严正名，八十年前，中国人民经过艰苦卓绝的斗争，与世界反法西斯力量一道战胜了日本军国主义和纳粹德国，为人类赢得了和平与正义。</p>
    <p>这场胜利奠定了以联合国为中心的国际秩序的基础，而中国作为二战东方主战场之一，其战略价值直接支持了盟军全球作战，贡献不容忽视。</p>
</body>

</html>

效果:

注意:

div这里我既有新闻来源标明也有图片的标明,而如果是用标签选择器,那么图片也会向左对齐,对此我们使用类选择器实现标签差异化,这样图片就可以单独居中而不是左对齐了

综合案例二-CSS简介

源代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS简介</title>
    <style>
        h1 {
            color: #333;
        }

        p {
            color: #444;
            font-size: 14px;
            text-indent: 2em;
            line-height: 30px;
        }

        a {
            color: #0069c0;
        }

        li {
            line-height: 30px;
            color: #444;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <h1>CSS(层叠样式表)</h1>
    <p>
        层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种 <a href="#">样式表</a>语言，
        用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）
        文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
    </p>
    <p>
        <strong>CSS 是开放 Web 的核心语言之一</strong>,并根据 W3C 规范在 Web 浏览器中进行了标准化。
        以前，CSS 规范的各个部分的开发是同步进行的，
        这种方式允许对最新推荐的 CSS 版本进行控制。
        你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4；
        相反，现在的一切都是没有版本号的 CSS。
    </p>
    <ul>
        <li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础文章以学习 CSS 的含义和用法。</li>
        <li>CSS 教程 我们的 CSS 学习区包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
        <li>CSS 参考 我们针对资深 Web 开发者编写的 <a href="#">详细参考手册</a>，描述了 CSS 的各个属性与概念。</li>
    </ul>
</body>

</html>

效果: