利用overflow实现导航栏中常 出现的倒三角下拉小图标

2023-06-26,,

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

效果如右图:

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

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

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

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

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

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

利用overflow实现导航栏中常 出现的倒三角下拉小图标的相关教程结束。

《利用overflow实现导航栏中常 出现的倒三角下拉小图标.doc》

下载本文的Word格式文档,以方便收藏与打印。