您的位置:CSS5 > css拷用 > 面包屑 > 正文

网站面包屑(你的位置)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)即可完成使用应用。

项目 操作 备注
框架 layui

立即下载layui v2X(实时更新

引入CSS 需要 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 不需要 此网页布局不用html引入JS库
layui教程 layui使用教程 layui教程地址

相关标签: 面包屑 您的位置
文章来源网址:css5.com.cn/kaoyong/1407.shtml

日期:2017-08-29 20:53 css学习与资料网 css div
上一篇:没有了
下一篇:自定义分隔符面包屑导航布局CSS DIV代码