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

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

联系客服