绝对定位练习-CSDN博客

本文链接：https://blog.csdn.net/gunmu/article/details/148077326

绝对定位可以让我们的网页处于一个固定位置，这次教大家用网页制作一个笑脸（迫真），以下是原代码

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>

      #div1{
                width: 75px;
                height: 75px;
                background-color: rgb(2, 17, 2);
                position: absolute;
                left: 50px;
                top: 100px;
                /* position: absolute; */
                /* left: 20px; 
                top: 20px;  */
          }  
      
      #div2{
            width: 75px;
            height: 75px;
            background-color: rgb(2, 17, 2);
            position: absolute;
            left: 250px;
            top: 100px;
            /* position: absolute; */
            /* left: 20px; 
            top: 20px;  */
          } 

      #div3{
            width: 300px;
            height: 50px;
            background-color: rgb(3, 3, 63);
            position: absolute;
            left: 200px;
            top: 250px;
            /* position: absolute; */
            /* left: 20px; 
            top: 20px;  */
          } 
          
    article{
            width: 500px;
            height: 500px;
            background-color: gray;

            /* position: absolute;
            left: 100px;
            top: 100px; */
        }

    </style>

  </head>

  <body>

    <article>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </article>

  </body>
</html>

1，首先，我们在body栏设置一个3个div标签，用作表情的眼睛跟嘴巴，如下所示

  <body>

    <article>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </article>

  </body>

2，我们可以给div以及article标签设置大小，背景颜色，以及位置，如下所示

    <style>

      #div1{
                width: 75px;
                height: 75px;
                background-color: rgb(2, 17, 2);
                position: absolute;
                left: 50px;
                top: 100px;
                /* position: absolute; */
                /* left: 20px; 
                top: 20px;  */
          }  
      
      #div2{
            width: 75px;
            height: 75px;
            background-color: rgb(2, 17, 2);
            position: absolute;
            left: 250px;
            top: 100px;
            /* position: absolute; */
            /* left: 20px; 
            top: 20px;  */
          } 

      #div3{
            width: 300px;
            height: 50px;
            background-color: rgb(3, 3, 63);
            position: absolute;
            left: 200px;
            top: 250px;
            /* position: absolute; */
            /* left: 20px; 
            top: 20px;  */
          } 
          
    article{
            width: 500px;
            height: 500px;
            background-color: gray;

            /* position: absolute;
            left: 100px;
            top: 100px; */
        }

    </style>

以下是效果图，我们也可以把绝对定位应用到想要的主题上，希望能帮到你！