学习 HTML 和 CSS 挑战斗争

Question

第一次来这里。

我正在参加 Angela Yu 的 Web 开发训练营，并做一个项目来测试我对级联（特异性和继承）、CSS 选择器及其组合以及定位的了解。

我需要仅使用 CSS 重新创建老挝国旗，而不需要触及现有的 html。这应该是一个挑战。我一直在努力解决最内部 p 元素的特殊性，并且我需要将文本放在圆圈内居中，但我真的坚持要做什么才能实现这一目标。

有任何帮助解释，或者关于我可以做什么更好来实现目标的建议吗？

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

<head>
  <meta charset="UTF-8">
  <title>CSS Flag Project</title>
  <style>
    /* Write your CSS Code here */
    
   .flag {
    background-color: firebrick;
    height: 600px;
    width: 900px;
    color:white;
    }

    .flag p {
    text-align: center;
    font-size: 65px;
  }
   

   div{
    background-color: rgb(0, 40, 104);
    height: 50%;
    position: relative;
    padding-top: 
   }

   

   .flag div p {
    color: black;
    background-color: white;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    position: absolute ;
    left: 40%
    
   }

  </style>
</head>

<!-- 
  IMPORTANT! Do not change any HTML
Don't add any classes/ids/elements 
Use what you know about combining selectors 
and CSS specificity instead.
Hint 1: The flag is 900px by 600px and the circle is 200px by 200px.
Hint 2: You can use CSS inspection to get the colors from
https://appbrewery.github.io/flag-of-laos/
-->

<body>
  <div class="flag">
    <p>The Flag</p>
    <div>
      <div>
        <p>of Laos</p>
      </div>
    </div>
  </div>
</body>

</html>

我尝试过调整元素的边距和填充，但它通常会做出巨大的改变，使其不再是一个有凝聚力的形状。如果我在“旗帜”部分周围添加填充或边距，它的移动量将超出我想要的移动量。我认为我可以在定位方面做得更好，但我不确定是什么。

Answer 1

您可以尝试将单独的样式应用于 div 和 p 元素，而不是直接选择 .flag div p。最好将两个元素分开处理，以便更好地控制，如下所示：

 .flag div div {
        background-color: white;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        position: absolute;
        left: 40%;
        top: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

 .flag div p {
        padding: 100px;
        text-align: center;
        width: 200px;
        color: black;
    }

学习 HTML 和 CSS 挑战斗争

问题描述投票：0回答：1

1个回答

最新问题

学习 HTML 和 CSS 挑战斗争

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1