div+css实现面包屑导航-默认竖线分隔、箭头分隔、空白分隔

div+css实现面包屑导航,主要用到了CSS3伪元素before,大家可以通过本利好好理解before的使用方法,下面125建站网给出实现代码。

div+css实现面包屑导航-默认竖线分隔、箭头分隔、空白分隔

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      ul,li{list-style: none;}			/* 多行式面包屑导航-默认竖线分隔 */
      .m-crumb{overflow:hidden;line-height:1.5;}
      .m-crumb ul{margin-left:-20px;}
      .m-crumb li{float:left;word-wrap:normal;white-space:nowrap;}
      .m-crumb li:before{display:inline-block;width:20px;text-align:center;content:'|';font-size:12px;color:#ccc;font-family:\5b8b\4f53;}
      /* 箭头分隔 */
      .m-crumb-arr li:before{content:'\3E';}
      /* 空白分隔 */
      .m-crumb-blank ul{margin-left:-10px;}
      .m-crumb-blank li:before{width:10px;content:'';}
    </style>
  </head>
  <body>
    <nav class="m-crumb">
        <ul class="f-cb">
            <li><a href="http://www.125jz.com/">首页</a></li>
            <li><a href="http://www.125jz.com/course">教程</a></li>
            <li><a href="http://www.125jz.com/course/html">网页制作</a></li>
            <li><a href="http://www.125jz.com/course/webdesign">网页设计</a></li>
        </ul>
    </nav>
    <nav class="m-crumb m-crumb-arr">
        <ul class="f-cb">
            <li><a href="http://www.125jz.com/">首页</a></li>
            <li><a href="http://www.125jz.com/course">教程</a></li>
            <li><a href="http://www.125jz.com/course/html">网页制作</a></li>
            <li><a href="http://www.125jz.com/course/webdesign">网页设计</a></li>
        </ul>
    </nav>
    <nav class="m-crumb m-crumb-blank">
        <ul class="f-cb">
           <li><a href="http://www.125jz.com/">首页</a></li>
            <li><a href="http://www.125jz.com/course">教程</a></li>
            <li><a href="http://www.125jz.com/course/html">网页制作</a></li>
            <li><a href="http://www.125jz.com/course/webdesign">网页设计</a></li>
        </ul>
    </nav> 
  </body>
</html>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/11155.html

(0)
上一篇 2023年1月5日 上午7:26
下一篇 2023年1月5日 上午10:19

99%的人还看了以下文章

  • 页面编码为UTF-8的项目中servlet中文显示乱码的解决方法

    servlet中文显示乱码:
    1、servlet中输出中文字符
    2、servlet接收表单传值并显示,表单字段含中文。

    网页制作 2020年2月23日
    1.6K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    2.2K0
  • iframe中子页和父页面如何传值

    本文介绍了,父页面father.html和子页面son.html之间如何传值,子页面如何调用父页面中的函数等操作

    2021年11月30日
    2.2K0
  • css布局基础:浮动和清除浮动练习2

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <header> <img …

    2020年4月4日
    1.3K0
  • jquery动态新增元素节点.click点击事件失效的2个解决方法

    问题: ajax读取留言列表,每条留言后面有个回复按钮,class为“reply”,用$(“.reply”).click(function(){ //do something… }),后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。 解决方法: 最简单的方法就是直接在标签中写onclick=”&#8…

    2019年2月16日
    2.8K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    1.8K0

发表回复

登录后才能评论