web前端开发怎么实现像图片这样的页面啊？

点击相关的关键字如“爱国守法”，下面的浮动框就出现相应的文字内容，请问是要做两个html文件吗？
只学了一些基本的HTML页面结构和编辑，还有超链接和框架标记，不要讲太难的，我不太理解˃̣̣̥᷄⌓˂̣̣̥᷅
（还没有学JvaaScript文件）

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

21条回答默认最新

杨同学* 2024-09-22 13:35

关注

该回答引用ChatGPT4o及杨同学*共同作答, 如有帮助，还请采纳。
要实现你描述的效果，实际上可以用HTML和CSS来完成，而不需要JavaScript。你可以通过CSS中的hover或者target伪类来显示和隐藏浮动的文本框。下面是一个简单的代码示例，模拟你提到的页面交互效果。

实现步骤：

关键字（比如“爱国守法”）是一个链接。
点击某个关键字时，下面显示相应的内容。
只用一个HTML文件，不需要两个文件。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公民基本道德规范</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f5f5f5;
        }

        .keywords {
            margin-top: 20px;
        }

        .keywords a {
            margin: 0 10px;
            text-decoration: none;
            font-size: 18px;
            color: #d00000;
        }

        .keywords a:hover {
            text-decoration: underline;
        }

        .content {
            margin-top: 20px;
            display: none;
        }

        /* 使用target来显示特定的内容 */
        #aiguo:target ~ .content.aiguo,
        #mingli:target ~ .content.mingli,
        #tuanjie:target ~ .content.tuanjie,
        #qinjian:target ~ .content.qinjian,
        #jingye:target ~ .content.jingye {
            display: block;
            background-color: #ffffff;
            padding: 20px;
            border: 1px solid #ccc;
            width: 50%;
            margin: 20px auto;
        }

        /* 隐藏其他内容 */
        #aiguo:target ~ .content:not(.aiguo),
        #mingli:target ~ .content:not(.mingli),
        #tuanjie:target ~ .content:not(.tuanjie),
        #qinjian:target ~ .content:not(.qinjian),
        #jingye:target ~ .content:not(.jingye) {
            display: none;
        }

    </style>
</head>
<body>
    <h1>公民基本道德规范</h1>

    <!-- 关键字列表 -->
    <div class="keywords">
        <a href="#aiguo">爱国守法</a>
        <a href="#mingli">明礼诚信</a>
        <a href="#tuanjie">团结友善</a>
        <a href="#qinjian">勤俭自强</a>
        <a href="#jingye">敬业奉献</a>
    </div>

    <!-- 文本内容 -->
    <a id="aiguo"></a>
    <div class="content aiguo">
        <p>“爱国守法”是每个公民的基本义务。作为公民，我们要遵守国家的法律，热爱自己的国家，为社会的稳定和谐贡献自己的力量。</p>
    </div>

    <a id="mingli"></a>
    <div class="content mingli">
        <p>“明礼诚信”要求公民在社会中诚信待人，礼貌相处，以德待人，做一个有道德的人。</p>
    </div>

    <a id="tuanjie"></a>
    <div class="content tuanjie">
        <p>“团结友善”是公民在集体中与人友好合作的重要品质，团结才能取得更好的成就。</p>
    </div>

    <a id="qinjian"></a>
    <div class="content qinjian">
        <p>“勤俭自强”提倡我们勤奋工作，节俭生活，自立自强，为自己的生活和社会的进步做出贡献。</p>
    </div>

    <a id="jingye"></a>
    <div class="content jingye">
        <p>“敬业奉献”意味着我们在工作和学习中要认真负责，精益求精，为国家、社会和他人贡献力量。</p>
    </div>
</body>
</html>