تمرین.........

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام خسته نباشید چطور دایره هارو پایین‌تر بیارم که با متن قاطی نشه؟

سلام. وقتتون بخیر

لطفا کدتون رو در کدپن قرار بدید و لینکش رو بذارید تا بررسی کنیم.

سحر پاشائی ۱۲ دی ۱۴۰۳، ۰۷:۳۰

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>Paragraph 1 in the div.</p>

height: 500px; margin: 30px; width: 500px;

<p>Paragraph 2 in the div.</p>

<p>Paragraph 3 in the div.</p>

</section>

</div>

<p class="p-1">Paragraph 4. After a div.</p>

<p class="p">Paragraph 5. Not in a div.</p>

<a href="#" target="_blank">Link with target="_blank"</a>

<a href="#" target="_self">Link with target="self"</a>

<br />

<span class="circle">Circle</span>

</body>

</html>

.container > p {

background-color: yellow;

color: red;

}

section {

background-color: yellow;

}

[class*="p"] {

color: rgb(192, 22, 192);

}

div.container + p {

font-size: 24px;

}

a[target="_blank"] {

color: green;

display: block;

}

span[class^="box"] {

height: 500px;

width: 500px;

position: relative;

}

[class^="box"] {

height: 500px;

margin: 30px;

width: 500px;

border: 2px solid green;

padding: 50px;

border-radius: 100%;

box-shadow: 1px 1px 3px rgb(43, 157, 14);

}

.circle {

height: 500px;

margin: 30px;

width: 500px;

padding: 50px;

border: 2px solid purple;

border-radius: 100%;

box-shadow: 1px 1px 3px rgb(139, 4, 139);

}

محدثه اسفندیاری ۱۲ دی ۱۴۰۳، ۱۷:۱۰

درود، وقتتون بخیر.
الان خروجی به این صورت شد:

این کد رو قرار بدید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container > p {
        background-color: yellow;
        color: red;
      }
      section {
        background-color: yellow;
      }
      [class*="p"] {
        color: rgb(192, 22, 192);
      }
      div.container + p {
        font-size: 24px;
      }
      a[target="_blank"] {
        color: green;
        display: block;
      }
      span[class^="box"] {
        height: 50px;
        width: 50px;
        /* position: relative; */
      }
      [class^="box"] {
        height: 50px;
        margin: 30px;
        width: 50px;
        border: 2px solid green;
        padding: 50px;
        border-radius: 100%;
        box-shadow: 1px 1px 3px rgb(43, 157, 14);
      }
      .circle {
        height: 50px;
        margin: 30px;
        width: 50px;
        padding: 50px;
        border: 2px solid purple;
        border-radius: 100%;
        box-shadow: 1px 1px 3px rgb(139, 4, 139);
      }
      span {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Paragraph 1 in the div.</p>
      height: 500px; margin: 30px; width: 500px;
      <p>Paragraph 2 in the div.</p>
      <section>
        <p>Paragraph 3 in the div.</p>
      </section>
    </div>
    <p class="p-1">Paragraph 4. After a div.</p>
    <p class="p">Paragraph 5. Not in a div.</p>
    <a href="#" target="_blank">Link with target="_blank"</a>
    <a href="#" target="_self">Link with target="self"</a>
    <!-- <br /> -->
    <div class="wrapper">
      <span class="box">Box</span>
      <span class="box-1">Box 1</span>
      <span class="box-2">Box 2</span>
      <span class="circle">Circle</span>
    </div>
  </body>
</html>

بهترین پاسخ

سحر پاشائی ۱۵ دی ۱۴۰۳، ۰۷:۰۹

متشکرم

محدثه اسفندیاری ۱۵ دی ۱۴۰۳، ۱۵:۵۹