zoukankan      html  css  js  c++  java
  • 利用overflow实现导航栏中常 出现的倒三角下拉小图标

    常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow:

    效果如右图:

    1 .Triangle{position:relative;width:280px;height:15px;}
    2 .T-son{position:absolute;height:8px;width:15px;display:inline-block;right:35px;bottom:0;overflow:hidden;}
    3 .T-sec-son{font-size:15px;line-height:15px;position:absolute;display:inline-block;bottom:0;color:#8E8E8E;}
    4 .pull-down{font-family:@微软雅黑;color:#D0D0D0;font-size:15px;float:right;}
    1 <div class="Triangle"2         
    span class="T-son"><span class="T-sec-son"></span></span> 3 <span class="pull-down">more</span><!--描述下方的倒三角下拉小图标与“more”实现--> 4 </div>

     将符号◇用输入法的软键盘输入,利用overflow超出父容器部分隐藏的特性,让我们需要的下半边三角让其在父容器里面,故父元素(.T-son)高位符号的一半,宽度相同(强调:父容器的宽度也是需要设置的,否则会让其整个内容被隐藏),再让其都绝对定位,bottom:0让其都底边对其,输入的符号下部分在父容器中,上部分被隐藏,达到效果。

    还需知的是:overflow起作用的前提:

                                                               1.元素为非display:inline元素---->故需要设施span标签的display类型;

                                                                2.对应方位的尺寸限制;

    这是我界面练习时所感所想,有不足之处请多多指教,谢谢!

  • 相关阅读:
    python的类基础
    python导入模块
    python常用的内置函数
    python基础一数据类型之集合
    python函数-匿名函数
    python的函数(三)
    python的函数(二)
    python的函数(一)
    BZOJ4104:[Thu Summer Camp 2015]解密运算——题解
    BZOJ4033:[HAOI2015]树上染色——题解
  • 原文地址:https://www.cnblogs.com/xiao-baobao/p/8379219.html
Copyright © 2011-2022 走看看