zoukankan      html  css  js  c++  java
  • day19—纯CSS实现菜单列表下框跟随效果

    转行学开发,代码100天——2018-04-04

    今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动。

    其中,列表内容显而易见,如下

    <ul>
            <li>这是</li>
            <li>一个很</li>
            <li>神秘的菜单</li>
            <li>光标移动过下划线</li>
            <li>跟随效果</li>
            <li>item1</li>
            <li>item2</li>
        </ul>

     在设计样式时,即时前面文章中介绍过的水平布局样式相似。

     无论时通过flex利器布局,还是float布局均可。但在尝试中并没有实现跟随效果,比照说明发现自己的程序中对<li>少了定位:position:relative属性设置。

    所有跟随功能实现样式如下:

    <style type="text/css">
        ul
        {
            /*display: flex;*/
            /*position: absolute;*/
            display: float;
        }
         li
         {
             display: inline;
             height: 30px;
             background-color: #ccc;
             list-style: none;
             position: relative;
             margin-left: 10px;
             border-bottom:0px solid #000;
             font-size: 12px;
         }
         li::before
         {
             content: "";
             position: absolute;
             top: 0;
             left: 100%;
             width: 0;
             height: 100%;
             border-bottom: 2px solid #000;
             transition: 0.2s all linear;
    
         }
         li:hover::before 
         {
            width: 100%;
            top: 0;
            left: 0;
            transition-delay: 0.1s;
            border-bottom-color: #000;
            transition: 0.2s all linear;
            cursor: pointer;
        }
        li:hover ~ li::before
        {
            left: 0;
        }    
        </style>

     在这里对定位方式,还是缺乏深入理解:其次对伪类的概念和应用缺少了解。

    关于定位方式:

    描述
    absolute

    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    fixed

    生成绝对定位的元素,相对于浏览器窗口进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    relative

    生成相对定位的元素,相对于其正常位置进行定位。

    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

    static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    inherit 规定应该从父元素继承 position 属性的值。







  • 相关阅读:
    while练习
    运算符
    作业
    [新手必看] 17个常见的Python运行时错误
    作业
    day04
    作业
    算法模板——线段树2(区间加+区间乘+区间求和)
    1798: [Ahoi2009]Seq 维护序列seq
    1708: [Usaco2007 Oct]Money奶牛的硬币
  • 原文地址:https://www.cnblogs.com/allencxw/p/8735526.html
Copyright © 2011-2022 走看看