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

  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    3.2K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    2.4K0
  • div+css制作上中下,中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。 上中下结构,中间又分为两列的全屏自适应布局HTML代码: <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…

    2018年8月2日
    4.4K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    2.9K0
  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    3.8K0
  • css布局基础:浮动和清除浮动练习2

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

    2020年4月4日
    2.0K0

发表回复

登录后才能评论