前言

有同学请教PbootCms中Logo居中的导航效果，如下图：

实现思路

方案1：

将logo插入在导航中输出；

方案2：

将logo通过绝对定位放置在所需位置。

实现代码

方案一的PbootCms标签代码

<nav>
    <ul>
        {@pboot:nav}
        <li><a href="[nav:link]">[nav:name]</a></li>
        {@pboot:if([nav:i]==3)}
        <li><a href="/"><img src="images/logo.png" alt=""></a></li>
        {@/pboot:if}
        {@/pboot:nav}
    </ul>
</nav>

重点在 if 判断中，当输出第三个导航的时候，多插入一个li标签，用于放置logo。

方案二的PbootCms标签代码

<nav>
    <div class="logo"><a href="/"><img src="images/logo.png" alt=""></a></div>
    <ul>
        {@pboot:nav}
        <li class="nav[nav:i]"><a href="[nav:link]">[nav:name]</a></li>
        {@/pboot:nav}
    </ul>
</nav>

辅助CSS样式

nav{ position: relative;}
.nav4{ margin-left:100px;}
.logo{ position: absolute; left: 50%; top:0; }

解释：

1、给nav相对定位属性；

2、给导航4设置左边距；

3、将logo通过绝对定位放置到导航4的左边距上。

注意事项

以上代码中的@符号，请手动删除，本站基于pbootcms搭建，加@防止程序解析。

你学会了嘛？用心学习代码思路哦。

联系客服

请使用QQ扫码

请使用微信扫码