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%的人还看了以下文章

  • PS图片转页面CSS+HTML的步骤

    标准的网页制作流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html页面。

    网页制作 2020年2月12日
    4.8K0
  • 跟永哥学HTML5(6):H5表单及表单验证

    表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
    在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

    2018年2月27日
    2.9K0
  • 第5课:到目前为止学到了些什么?

    上一课我们已经学习了这些: <html> <head><title></title></head> <body> </body> </html> 网页标题(title)写在head(头部)里:<title>网页标题写在这里</title>。…

    2018年1月20日
    2.3K0
  • css布局基础-盒子模型

    网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    2022年7月14日
    7980
  • 跟永哥学HTML5(2):html5与html4的区别

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

    2018年1月21日
    2.4K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    5.3K0

发表回复

登录后才能评论