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搭建，加@防止程序解析。

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