天涯客063 2025-04-13 14:58 采纳率: 66.7%
浏览 11
已结题

这个页面用html如何实现？

我想用html实现这个效果，绿色框里放数学题，图片，红色框里放解题过程，"习题"，"解析"这些文字我要能自己改

上方那个页眉是多余的，不需要

这个html代码我要放在markdown文件里，发布到我的个人博客上用的

我是要在多篇文章里用这个页面效果，经常用的

img

  • 写回答

3条回答 默认 最新

  • 码农阿豪@新空间 新星创作者: 前端开发技术领域 2025-04-13 15:15
    关注
    让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言
    要实现您描述的效果，可以使用以下HTML和CSS代码： 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math Problem</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: auto auto;
            margin: 20px;
        }
        .problem {
            border: 2px solid green;
            padding: 10px;
        }
        .solution {
            border: 2px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="problem">
            <h2>习题</h2>
            <p>这里是数学题</p>
            <img src="https://i-blog.csdnimg.cn/ask/2fc59c0ca4024c98a2d62d3fc03961ac.jpeg" alt="img" />
        </div>
        <div class="solution">
            <h2>解析</h2>
            <p>这是解题过程</p>
        </div>
    </div>
</body>
</html>

    在以上代码中，我们使用了一个网格布局来分割页面为两个部分，一个是绿色框里放数学题和图片的部分，另一个是红色框里放解题过程的部分。您可以自定义数学题和解析部分的内容，如文字和图片等。 将以上代码保存为一个 HTML 文件，在您的个人博客中插入这段代码即可实现您想要的效果。您可以根据需要修改样式和内容。希望这个解答对您有帮助。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 11月27日
  • 已采纳回答 11月19日
  • 修改了问题 4月13日
  • 修改了问题 4月13日
  • 展开全部