美文网首页
2.添加hot图标,导航变红

2.添加hot图标,导航变红

作者: iqing2012 | 来源:发表于2019-12-12 14:24 被阅读0次

    在theme.scss.liquid末尾空白处添上.如果你有两个以上的标签想要变红,把下面的代码复制一次,然后把4改成要加的链接的索引即可。

    
    
     .site-nav>li:nth-of-type(4)>a{color:red!important;font-weight:bold;position:relative}
    
    
    .chicv-relative{
      position:relative;
    }
    
    .hotTag::after {
        position: absolute;
        top: 95%;
        left: 5px;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        border-color: #f35b6e transparent transparent transparent;
    }
    .hotTag {
        position: absolute;
        padding: 0 6px .5px;
        left: 15px;
        top: -20px;
        color: #fff;
        background-color: #f35b6e;
        line-height: 15px;
        height: 15px;
        font-size: 10px;
        white-space: nowrap;
    
    }
    

    然后在site-nav.liquid文件搜has-dropdown,并且在 <a后面添加 class="chicv-relative"。请仔细对照图片操作。
    如果你还有第三或者第四个标签 在下面or forloop.index==11 后面添加 or forloop.index==你想要加的标签索引号,以此类推。

    {%- if forloop.index==2 or forloop.index==11  -%}
      <span class="hotTag">hot</span>
    {%- endif -%}
    
    image.png

    相关文章

      网友评论

          本文标题:2.添加hot图标,导航变红

          本文链接:https://www.haomeiwen.com/subject/pqkagctx.html