网站面包屑（你的位置）css布局代码

网站内页中除了网站导航外，还有一个你当前页面位置导航，被称为面包屑导航，比如(你)您的位置 首页 栏目 子栏目 内容页这样导航指引功能的div css布局。

你的位置 网站面包屑 css布局的效果

一般情况下，网站内页导航项目 与内容之间都会有一个“您的位置”、“你的位置”、“当前位置”的面包屑内容，目的让访问知道你处在网站什么位置，上一级栏目等信息，同时是带超链接的可以点击到达面包屑指向网页。

此款为链接之间为“>”大于号箭头一样间隔符。但实际布局时候没有，通过layui框架集成。

一、面包屑导航在线效果

您的位置： 首页 国际新闻 亚太地区 正文

默认常见的网页布局排版效果。

您的位置：<span class="layui-breadcrumb">

<a href="">首页</a>

<a href="">国际新闻</a>

<a href="">亚太地区</a>

<a><cite>正文</cite></a>

</span>

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

1、从HTML代码看，非常简单，对面包屑对象加class为layui-breadcrumb，即可。

2、此css排版面包屑效果，因为采用JS插入“>”间隔，所以在网页头部“head”内引入JS，同时加上上面js代码，即可实现此面包导航菜单排版效果。需要注意，html引入JS文件是放在HTML直接写JS代码前。

二、面包屑导航实现方法

因为这里面包屑导航布局，虽然简单，但是它是基于layui框架的，所以需要引入layui框架

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