自适应宽度圆角导航如何实现
子元素的背景图片右对齐,这样就可以覆盖父元素的背景,而padding-left是为了让父元素露出按钮左侧部分不致于被子元素的背景覆盖。
优点:自适应宽度变化;各浏览器显示效果一致;
缺点:
  1. 由于使用子元素的背景图覆盖父元素的,所以不能使用背景透明的图片来实现,否则按钮右侧圆角部分会使得父元素的背景图片露出,大街网使用的是白色背景,因此该按钮如果在非白色背景的场景使用会有白边:
  2. 如果有多个不同高度的按钮,就要制作多张图片,或者使用图片拼接拼成一张,不便维护和拓展;
  3. 引进无语义化的html标签;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0; padding: 0}
        .bg{height: 50px;}
        .leftBg{
            height: 45px;
            line-height: 45px;
            color: #fff;
            background: url(left.png) no-repeat left top;
            padding-left: 34px;
            float: left;
            position: absolute;
        }
        .rightBg{
            height: 45px;
            padding-right: 45px;
            background: url(right1.png) no-repeat right top;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="leftBg"><div class="rightBg">5s跳过,广告是3分钟</div></div>
    </div>
</body>
</html>

相关文章:

  • 2022-12-23
  • 2021-12-28
  • 2022-12-23
  • 2022-01-19
  • 2021-11-23
  • 2021-09-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-11-07
  • 2022-01-21
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案