day6 固定定位与模式转换

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定广告</title>
   <style>
   *{
     margin: 0;
     padding:0;
   }
   .top {
       height: 44px;
       background:url(images/top.png) no-repeat top center;
       position: fixed;
       width: 100%;
       /* 因为固定定位把元素转换为行内块元素，行内块元素的宽高与内容有关。 */
       top: 0;
       left: 0;
   }
   .box {
       margin: 44px auto 0;
       width: 1002px;

   }
   
   .ad-1,.ad-r {
       position:fixed;
       top:100px;
   }
   .ad-r {
     right: 0;  
   }
   </style>
</head>
<body>
    <img src="images/ad-1.png" alt=""class="ad-1">
    <img src="images/ad-r.png" alt="" class="ad-r">
    <div class="top"></div>
    <div class="box">
        <img src="images/box.png" alt="">
    </div>
</body>
</html>

效果图如下：

posted @ 2020-01-20 22:03 竹石君阅读(120) 评论(0) 编辑收藏举报

竹石君

day6 固定定位与模式转换

公告