最新公告
  • 欢迎您光临尘梦网,我们提供建站技术教学,帮助用户实现从技能提升到技能应用的能力闭环。立即加入我们
  • pbootCms制作Logo居中的导航效果

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

    image.png

    实现思路

    方案1:

    将logo插入在导航中输出;

    方案2:

    将logo通过绝对定位放置在所需位置。

    实现代码

    方案一的PbootCms标签代码

    1. <nav>
    2.     <ul>
    3. [email protected]:nav}
    4.         <li><a href=“[nav:link]”>[nav:name]</a></li>
    5. [email protected]:if([nav:i]==3)}
    6.         <li><a href=“/”><img src=“images/logo.png” alt=“”></a></li>
    7.         {@/pboot:if}
    8.         {@/pboot:nav}
    9.     </ul>
    10. </nav>

    重点在 if 判断中,当输出第三个导航的时候,多插入一个li标签,用于放置logo。

    方案二的PbootCms标签代码

    1. <nav>
    2.     <div class=“logo”><a href=“/”><img src=“images/logo.png” alt=“”></a></div>
    3.     <ul>
    4. [email protected]:nav}
    5.         <li class=“nav[nav:i]”><a href=“[nav:link]”>[nav:name]</a></li>
    6.         {@/pboot:nav}
    7.     </ul>
    8. </nav>

    辅助CSS样式

    1. navposition: relative;}
    2. .nav4margin-left:100px;}
    3. .logoposition: absolute; left50%top:0; }

    解释:

    1、给nav相对定位属性;

    2、给导航4设置左边距;

    3、将logo通过绝对定位放置到导航4的左边距上。

    注意事项

    [email protected],请手动删除,本站基于pbootcms搭建,[email protected]

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

    尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    尘梦网 » pbootCms制作Logo居中的导航效果

    常见问题FAQ

    尘梦网是什么?
    尘梦网(itwork.ren)是互联网综合学习平台。尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    本站课程是否为1对1教学?
    本站为录播课程,可直接寻找对应课程观看,不定时会有直播课
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    免费下载或者会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供部分资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

    发表评论

    • 24350会员总数(位)
    • 367资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 137稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情