风筝效果小练习

dafengkuang lv.1

发布时间：2023-02-09 19:32:36 278

相关标签： # html# webkit

风筝效果小练习_绝对定位

实现效果如图：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      *{margin:0;padding:0;}
      .mydiv{
        width:200px;
        height:200px;
        background: red;
        position:absolute;
        left:50%;
        margin-left:-100px;
        top:50%;
        margin-top:-100px;
    
      }
      /* 右下角 */
      /* .mydiv div{
        width: 50%;
        height: 50%;
        background: black;
        position: absolute;
        left: 100%;
        top: 100%;  
      } */
      
      /* 左上角 */
      /* .mydiv div{
        width: 50%;
        height: 50%;
        background: black;
        position: absolute;
        left: -50%;
        top: -50%;
      } */
      /* 右上角 */
      /* .mydiv div{
        width: 50%;
        height: 50%;
        background: black;
        position: absolute;
        left: 100%;
        top: -50%;
      } */
      /* 左下角 */
      /* .mydiv div{
        width: 50%;
        height: 50%;
        background: black;
        position: absolute;
        left: -50%;
        top: 100%;
      } */
    </style>
  </head>
  <body>
    <div class="mydiv">
      <!-- 左移200
       上200
       宽100px
       高100px
       -->
      <div >
        <!-- 宽50
         高50
         left：100
         top:100
         -->
        <div></div>
      </div>
    </div>
    
  </body>
</html>

主要运用绝对定位，和百分比的方式实现

文章来源： https://blog.51cto.com/u_15949973/6036030

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。