pbootCms制作Logo居中的导航效果_PbootCMS教程

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

# gt  # PbootCms  # center  # align  # text  # lt  # logo  # nav  # nbsp  # pbootCms制作Logo居中的导航效果  # jpg  # hongkong  # aliyucs  # keji  # 如下图  # 第三个  # 所需  # PbootCMS教程 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 网络优化91478 】 【 技术知识72672 】 【 云计算0 】 【 GEO优化84317 】 【 优选文章0 】 【 营销推广36048 】 【 网络运营41350 】 【 案例网站102563 】 【 AI智能45237 】

相关推荐： 如何用IIS7快速搭建并优化网站站点？  如何在阿里云香港服务器快速搭建网站？  高端企业智能建站程序：SEO优化与响应式模板定制开发  如何高效搭建专业期货交易平台网站？  dedecms织梦列表页生成静态分页URL链接改成*路径的方法_织梦CMS教程  织梦自定义表单限制IP发表次数教程_织梦CMS教程  建站助手数据库密码错误与MySQL服务异常排查指南  建站之星无法安装，如何排查服务器环境兼容性？  dedecms织梦不同栏目导航显示不同样式的方法_织梦CMS教程  apache、nginx、iis服务器设置防止织梦dedecms模板被盗_织梦CMS教程  如何在景安云服务器上绑定域名并配置虚拟主机？  织梦kindeditor文本编辑器增加“查找替换”功能_织梦CMS教程  定制建站是什么？如何实现个性化需求？  建站之星重新安装后模板如何恢复设置？  建站之星授权问题如何联系客服解决？  织梦会员中心*一键登录2.0 FOR V55 V56 V57免费插件_织梦插件  织梦调用整站相关文章_织梦CMS教程  dedecms织梦去除版权powered by dedecms方法_织梦CMS教程  织梦dedecms手机站与PC站同步生成静态文件html教程_织梦插件  织梦调用文章简介[field:description /]如何限制字数_织梦CMS教程  建站之星云端配置指南：模板选择与SEO优化一键生成  魔毅自助建站系统：模板定制与SEO优化一键生成指南  定制建站平台哪家好？企业官网搭建与快速建站方案推荐  织梦list列表页调用body内容的教程_织梦CMS教程  如何在西部数码注册域名并快速搭建网站？  织梦手机端文章内容图片变形解决方法_织梦CMS教程  建站之星配置全解析：模板选择与填写指南轻松掌握  阿里云提示织梦后台文件media_add.php任意上传漏洞解决办法 _织梦CMS教程  dedecms织梦实现中英文分页功能_织梦CMS教程    织梦文章内容每个段落自动加工【伪原创内容提高收录排名插件】_织梦插件  织梦图集上传图片用图片名自动做注释教程_织梦CMS教程  建站之星网站服务支持退款吗？如何操作？  织梦发布文章添加禁用词语过滤功能_织梦CMS教程  织梦DedeCMS二次开发教程之创建数据表_织梦CMS教程  如何解决VPS建站LNMP环境配置常见问题？  如何通过cPanel快速搭建网站？  织梦实现三级多级栏目嵌套调用教程_织梦CMS教程  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  建站之星×万网：智能建站系统+自助建站平台一键生成  如何基于云服务器快速搭建个人网站？  dedecms织梦为每个页面生成二维码 _织梦CMS教程  织梦dedecms手机站m目录下不生成index.html实现动态更新_织梦CMS教程  如何在企业微信快速生成手机电脑官网？  如何注册花生壳免费域名并搭建个人网站？  织梦如何取消后台登陆验证码_织梦CMS教程  织梦实现分类搜索的功能（下拉搜索）_织梦CMS教程  如何通过多用户协作模板快速搭建高效企业网站？  如何选择适配移动端的WAP自助建站平台？  织梦dedecms 5.7怎样在任意位置显示自由列表标题+链接_织梦CMS教程 

 2022-03-26