pbootCms制作Logo居中的导航效果

有同学请教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群

本站客服QQ号：3149518909（点击左边QQ号交流），群号(383578617) 如果您有任何织梦问题，请把问题发到群里，阁主将为您写解决教程！

转载请注明： 织梦模板 » pbootCms制作Logo居中的导航效果