雪梨篮儿 2024-04-18 20:27 采纳率: 75.9%
浏览 2
已结题

css基础为什么这个样子吧？？

想把文字的三段话放到绿色背景的上面，怎么做？

<!DOCTYPE html>
<html>
<head >
    <meta charset="utf-8">
    <title>作业</title>
    <style type="text/css">
        
        .div2{
            width:400px;
            height: 400px;
            background-color: olive;
        }
        p{
            color:red;
            font-size:40px;
            background-color: silver;
            width:200px;
            left:20px;
            tou:20px;
            
        }
    </style>
    </head>
    <body >
         <p >
            这是一段话啦
        </p>
        <p >
            这是一段话啦
        </p>
        <p >
            这是一段话啦
        </p>
        <div class="div2">
        </div>
    </body>
</html>
  • 写回答

3条回答 默认 最新

  • Kwan的解忧杂货铺@新空间代码工作室 2024-04-18 20:28
    关注

    晚上好🌙🌙🌙
    本答案参考ChatGPT-3.5

    在给定的HTML代码中，你想要将文字的三段话放到绿色背景上面。但是，当前的代码中，文本与绿色背景的div元素没有直接关联，导致文本无法放置在指定位置上。

    要实现将文字放到绿色背景的上面，你需要进行以下修改：

    1. 将div元素与文本放置在相同的父元素内。可以使用一个容器元素（如div）将文本和绿色背景的div包裹起来。

    2. 设置容器元素（div）的背景颜色为绿色。

    3. 调整文本的样式，使其居中显示在绿色背景上方。

    下面是修改后的代码示例：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>作业</title>
    <style type="text/css">
        .div2 {
            width: 400px;
            height: 400px;
            background-color: olive;
            position: relative; /* 添加定位属性，使文本相对于div元素进行定位 */
        }
        
        .container {
            position: absolute; /* 添加定位属性，使容器元素相对于div元素进行定位 */
            top: 50%; /* 将容器元素顶部与div元素的中心位置对齐 */
            left: 50%; /* 将容器元素左侧与div元素的中心位置对齐 */
            transform: translate(-50%, -50%); /* 使用transform属性将容器元素居中显示 */
            text-align: center; /* 设置容器元素内文本居中显示 */
        }
        
        p {
            color: red;
            font-size: 40px;
            background-color: silver;
            width: 200px;
            margin: 0 auto; /* 设置文本居中显示 */
            margin-bottom: 20px; /* 设置文本之间的间距 */
        }
    </style>
</head>
<body>
    <div class="div2">
        <div class="container">
            <p>这是一段话啦</p>
            <p>这是一段话啦</p>
            <p>这是一段话啦</p>
        </div>
    </div>
</body>
</html>

    这样修改后的代码中，文本会被放置在绿色背景的上方，并且居中显示。你可以根据需要调整文本与绿色背景之间的距离以及文本的样式。

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

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月18日
  • 已采纳回答 4月18日
  • 创建了问题 4月18日

悬赏问题

  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境
  • ¥30 关于#java#的问题，请各位专家解答！
  • ¥30 vue+element根据数据循环生成多个table，如何实现最后一列 平均分合并
  • ¥20 pcf8563时钟芯片不启振