有同学请教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居中的导航效果
