pink前端基础--定位的使用案列淘宝焦点图

最新推荐文章于 2024-11-08 08:31:36 发布

白柳的信徒

最新推荐文章于 2024-11-08 08:31:36 发布

阅读量281

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/m0_64882756/article/details/137565227

版权

要实现一个盒子里面盒子的位置，需要用定位来约束位置实现效果

展示图：

1.先建一个父盒子，在里面添加图片和左右两个链接a

<body>
    <div class="tb-promo">
      <img src="img/taobao.png" alt="" />
      <a href="#" class="left"><</a>
      <a href="#" class="right">></a>
    </div>
  </body>

2.css样式要消除浮动；

2.1给父盒子添加 position: relative;绝对定位来约束子盒子的位置；

给子盒子添加相对定位position: absolute; 添加top或者left属性来调整在父盒子内的位置。

2.2样式代码

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .tb-promo {
        position: relative;
        width: 600px;
        height: 250px;
        margin: 100px auto;
      }
      .tb-promo img {
        width: 100%;
        height: 100%;
      }
      .right {
        right: 0;
      }
      .left {
        left: 0;
      }
      /* 也可以用并集选择器 减少代码 */
      /* 如果一个盒子既有left也有right 只会执行左侧按钮 */
      .left,
      .right {
        position: absolute;
        height: 20px;
        width: 20px;
        text-decoration: none;
        line-height: 20px;
        top: 50%;
        margin-top: -15px;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        color: #fff;
      }
    </style>

白柳的信徒

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

pink前端基础--定位的使用案列 淘宝焦点图

pink前端基础--定位的使用案列淘宝焦点图