标题栏模块溢出css效果

最新推荐文章于 2019-09-26 17:25:15 发布

weixin_33716557

最新推荐文章于 2019-09-26 17:25:15 发布

阅读量111

点赞数

文章标签： python

原文链接：https://my.oschina.net/wangch5453/blog/666730

版权

2019独角兽企业重金招聘Python工程师标准>>>

最终需要实现的效果如上图

此处主要讨论商品介绍模块溢出压住标题栏的问题

标题栏使用ul实现 li左浮动里面的字为a标签包裹的链接

有两种方法实现溢出，实现的方法相同只是最终的实现效果略有不同

①a float后调整边框撑起整个li 点击整块白色部分都可链接，通过调整a溢出

②只有字可以链接，直接调整li溢出

正如上文所说实现溢出的方法一样只是操作的对象不同，这里以li溢出为例

<ul class="buy_consult">
      <li class="all_buy"><a href="">全部购买咨询</a></li>
      <li><a href="#">商品咨询</a></li>
      <li><a href="#">库存配送</a></li>
      <li><a href="#">支付</a></li>
      <li><a href="#">保修</a></li>
      <li><a href="#">支付帮助</a></li>
      <li><a href="#">配送帮助</a></li>
      <li><a href="#">常见问题</a></li>
</ul>

.buy_consult{
    border-top: 2px solid #999999;
    background-color: #f7f7f7;
    height: 28px; 

    /*注意此处一定不要写line-height:28px*/ 

   /*不可写overflow:hidden;否则会无法溢出*/
}
.buy_consult>li{
    float: left;
    padding: 0px 12px;
    font-size: 12px;
    height: 28px;        
    line-height: 28px;
}
.buy_consult>li.all_buy{  /*第一个白色溢出模块*/
    height: 32px;
    line-height: 32px;/*里面的块的高度大于外面的块，并且设置line-height就可实现溢出*/
    background-color: #fff;
    border-top:2px solid #e3393c;
    margin-top:-5px; 
}
.buy_consult li a{
    font-size: 14px;
}

注意：在li等块中一些内含块的高度不用不能通过统一设置line-height实现垂直居中，可分别设置line-heigh值

**************************line-height值的设置可以实现很多内含元素的居中对齐************

内含元素要去覆盖外面元素的line-height值一定要注意选择器的优先级，如果优先级不够则无法完成覆盖

转载于:https://my.oschina.net/wangch5453/blog/666730