自定义分隔符面包屑导航布局CSS DIV代码

div css布局网页内页导航功能的面包屑布局，面包屑内容间隔采用自定义字符。layui默认有常用间隔，也可以自定义，布局用法简单。

自定义间隔符面包屑效果

特点：
1、采用layui布局，间隔符号与内容分离
2、使用非常简单，引入layui框架，拷贝对应HTML和JS代码即可。
3、间隔符号可以自定义。

一、自定义面包屑效果与代码

从以上效果看到，自定义面包屑间隔符号不同的，实现不同场景可以自定义需求。

<div style="padding-left:20px">
您的位置：<span class="layui-breadcrumb" lay-separator="-">
<a href="#">首页</a>
<a href="#">国际新闻</a>
<a href="#">亚太地区</a>
<a><cite>正文</cite></a>
</span>
</div>

<div style="padding-left:20px">
您的位置：<span class="layui-breadcrumb" lay-separator="》">
<a href="#">首页</a>
<a href="#">国际新闻</a>
<a href="#">亚太地区</a>
<a><cite>正文</cite></a>
</span>
</div>

以下是JS引入与JS代码

<script src="layui/layui.js"></script>
<script>
    layui.use('element', function(){     
        var element = layui.element;
    });
 </script>

代码分析：
1、与默认间隔相比，此可以自定义字符的多了lay-separator=" "设置自定义字符，面包屑父级对象css class的值layui-breadcrumb不变。这里定义“》”和“-”，找到规律，可以根据项目灵活自定义需要面包屑间隔符号。
2、看似简单DIV CSS布局排版，实际中使用js插入间隔字符，所以需要引入layui.js文件，和自定义js代码，将对应引入JS文件拷贝JS代码即可（注意 HTML引入layui.js库是在自定义js代码前，如果位置交换会导致特效 CSS布局失效）。

二、使用说明

基于layui框架，所以需要项目中引入CSS库和JS库资源，但不会对你开发造成冲突，可以放心下载 放心引入使用。

项目使用步骤：
1、下载layui压缩包；
2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；
3、html引入layui.css（注意路径正确）；
4、拷贝需要效果HTML代码（和JS）即可完成使用应用。