欢迎来到六久阁织梦模板网!
pbootCms制作Logo居中的导航效果

pbootCms制作Logo居中的导航效果

浏览次数: 0

作者: 六久阁织梦模板网

信息来源: 六久阁

更新日期: 2022-03-26

文章简介

有同学请教PbootCms中Logo居中的导航效果,如下图: 实现思路 方案1: 将logo插入在导航中输出; 方案2: 将logo通过绝对定位放置在所需位置。 实现代码 方案一的PbootCms标签代码 nav ul {@pboot:nav} lia href=[nav:link][nav:name]/a/li {@pboot:if([nav:

  • 正文开始
  • 热门文章

有同学请教PbootCms中Logo居中的导航效果,如下图:

image.png

实现思路

方案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) DedeCMS织梦教程QQ群 如果您有任何织梦问题,请把问题发到群里,阁主将为您写解决教程!

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

标签:
  • 用PbootCms扩展标签定制属于自己的模板
    阅读
    为什么写这个?可能有人觉得没啥作用,我写这个的目的就是为了让pbootcms更适合自己使用,更简洁简便。 2020.04.04 新增智能路径,js、css自动追加版本号;快速链接。 2020.04.03 新增每日一图标签。 调用必应搜索的每日一图接口,返回图片URL,调用标签:{...
  • 优化PbootCms程序的点赞功能效果
    阅读
    PbootCms默认的点赞、反对效果 写这篇文章时pbootCms版本是V2.0.7 CMS系统默认给出了点赞、反对的链接。分别是: {content:likeslink} 点赞链接 {content:opposelink} 反对链接 使用效果是,点击一次,页面刷新一下,点赞数{content:likes}、{content:oppose...
  • PbootCms扩展标签之广告敏感词及极限词替换
    阅读
    最近有个客户来咨询广告敏感词的问题,客户使用的是ASPCMS系统,这个系统已经被我放弃了,推荐客户使用PbootCms来做,客户不愿意,实在提不起兴趣搞考古研究。 但是呢这个想法是不错的,可以做进pbootCms扩展里...
  • 如何清理PbootCMS程序中的冗余无效图片
    阅读
    PbootCms默认是没有图片管理器的,所以若是使用相同的图片,都需要每次重新上传。再加上误传的、更新的图片,项目目录里就会产生很多冗余图片,文件夹越来越大,备份越来越臃肿。 针对已经存在的站点我们开发了一个冗余文件处理功能。 先来上一波图: 有图有...
  • PbootCms扩展个性化日期调用
    阅读
    PbootCms默认的日期标签可以使用style=Y-m-d形式定制日期格式。这不是本着把扩展标签玩出花样的目的来搞一搞事情。(当然也是给各位做一个学习参考) 我想要的效果是,发布时间可以显示: 刚刚 1小时前; 昨天 几点几分; 前天 几点几分; 年月日 几点几分;...
  • PbootCms的Tag标签的调用及使用说明
    阅读
    很多初学者在使用PbootCms的过程中都会遇到各种各样的问题,有很多问题其实真的是很简单,不过是没有耐心去仔细翻阅开发手册。只要多一份耐心仔细查阅都能找到答案。 我们来整理一些初学者常遇到的问题。今天讲一些TAG标签,初学者可以看看,大佬就请直接绕...
  • pbootCms制作Logo居中的导航效果
    阅读
    有同学请教PbootCms中Logo居中的导航效果,如下图: 实现思路 方案1: 将logo插入在导航中输出; 方案2: 将logo通过绝对定位放置在所需位置。 实现代码 方案一的PbootCms标签代码 nav ul {@pboot:nav} lia href=[nav:link][nav:name]/a/li {@pboot:if([nav:...
  • 用PbootCms扩展定制一个访客当地天气功能
    阅读
    PbootCms交流群里有同学提出给PbootCms加一个天气。安排。 实现思路 首先我们要获取访客IP,pb有写好的方法,get_user_ip(),这个就不用重复去写了。 有了IP地址就要去查IP归属城市, 查询好归属地之后再用归属地去查询当地天气。 根据IP查询城市 百度地图有...
  • PbootCms程序模板中怎么写PHP代码
    阅读
    模板中写php代码 PbootCms中执行PHP代码有2种方式, /*方法一*/ {php} echo Hello Word! {/php} /*方法二*/ ?php echo Hello China!; ? 注意事项 由于PbootCms的模板机制,原生php代码中是无法对pb标签中的值进行二次处理的。 举个例子(错误示范) 后台有个...
  • PbootCms导航菜单标签调用小技巧
    阅读
    PbootCms官方群里每天都会有一些小白问一些很简单没啥技术含量的问题,导致大家都懒的教,技术讨论的质量越来越低。 这里我把一些小白常遇到的问题理一理,希望对新手有些帮助,当然,最好还是提升下自身的基础知识储备,早日走向大神之路。 关于导航菜单 {@...
收藏此文 打赏本站

如本文对您有帮助,就请六久阁织梦模板网抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
PbootCms制作ajax无刷新加载列表内容
« 上一篇 2022年04月03日
PbootCms导航菜单标签调用小技巧
下一篇 » 2022年03月26日

精彩评论

有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!
推荐精品模板更多
重型机械设备响应式织梦模板
更新时间:2017-08-10

人已经看过了!

大学职业学院技术学校类织梦模板(带手机端)
更新时间:2018-04-24

人已经看过了!

营销型装饰装修展柜制作织梦模板(带手机端)
更新时间:2018-04-17

人已经看过了!

大气漂亮婚纱摄影织梦模板 带数据同步手机m站
更新时间:2017-08-10

人已经看过了!