css实现面包屑导航
HTML代码:
<div id="breadcrumb">
<ul class="crumbs">
<li class="first"><a href="#" style="z-index:9;"><span></span>Blog Home</a></li>
<li><a href="#" style="z-index:8;">Archives</a></li>
<li><a href="#" style="z-index:7;">2011 Writing</a></li>
<li><a href="#" style="z-index:6;">Tips for jQuer</a></li>
</ul>
</div>
CSS代码:
.crumbs { display: block; }
.crumbs li { display: inline; }
.crumbs li.first { padding-left: 8px; }
.crumbs li a,
.crumbs li a:link,
.crumbs li a:visited {
color: #666;
display: block;
float: left;
font-size: 12px;
margin-left: -13px;
padding: 7px 17px 11px 25px;
position: relative;
text-decoration: none;
}
.crumbs li a {
background-image: url(/assets/stylesheets/images/bg-crumbs.png);
background-repeat: no-repeat;
background-position: 100% 0;
position: relative;
}
.crumbs li a:hover {
color: #333;
background-position: 100% -48px;
cursor: pointer;
}
.crumbs li a:active {
color: #333;
background-position: 100% -96px;
}
.crumbs li.first a span {
height: 29px;
width: 3px;
border-left: 1px solid #d9d9d9;
position: absolute;
top: 0px;
left: 0px;
}
设计图片:
文章原地址:http://www.hongkiat.com/blog/breadcrumb-menu-css3/
实现效果:http://media02.hongkiat.com/css3-breadcrumb/demo/index.html#
css实现面包屑导航的更多相关文章
- amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb
amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- Bootstrap (导航、标签、面包屑导航)
导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...
- NEC学习 ---- 模块 -多行式面包屑导航
如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...
- 夺命雷公狗ThinkPHP项目之----企业网站25之网站前台面包屑导航URL的完善
如果想取出面包屑导航的url那么就必须在model层里面进行多取一个了: <?php namespace Home\Model; use Think\Model; class CategoryM ...
- 纯CSS3编写的面包屑导航收集
整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导 ...
- Bootstrap面包屑导航
Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...
- Bootstrap-CL:面包屑导航
ylbtech-Bootstrap-CL:面包屑导航 1.返回顶部 1. Bootstrap 面包屑导航(Breadcrumbs) 面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式 ...
随机推荐
- 【特征匹配】SIFT原理之KD树+BBF算法解析
转载请注明出处:http://blog.csdn.net/luoshixian099/article/details/47606159 继上一篇中已经介绍了SIFT原理与C源代码剖析,最后得到了一系列 ...
- SQL SERVER的整型运算,让人大吃一惊
SQL SERVER的整型运算,让人大吃一惊好比下面代码:DECLARE @i INT = 50;DECLARE @dec DECIMAL(18,4);SET @dec = @i / 100;SELE ...
- Ambarella SDK build 步骤解析
Make Target Options make命令如下: make <Tab> <Tab> /*列出所有支持的目标(命令行输入make, 再按两下Tab键)*/ make & ...
- oc62--block1
// // main.m // Block的应用场景 // typedef void (^workBlock)(); #import <Foundation/Foundation.h> / ...
- Android网络连接监听
接收系统网络服务的广播接收者 public class NetStateReceiver extends BroadcastReceiver { private Handler handler; pu ...
- Intervals(差分约束系统)
http://poj.org/problem?id=1201 题意:给定n个整数闭区间[a,b]和n个整数c,求一个最小的整数集合Z,满足Z里边的数中范围在闭区间[a,b]的个数不小于c个. 思路:根 ...
- APPStore 发布流程及证书申请
最新的 iOS 申请证书与发布流程(2016.7) 今天刚好客户定制的APP需要上架,也提供了新的开发者账号,所以就顺带把申请证书与发布流程写一遍. 证书是什么? 上面这个就是我们申请好证书后,下载到 ...
- 一个对象toString()方法如果没有被重写,那么默认调用它的父类Object的toString()方法,而Object的toString()方法是打印该对象的hashCode,一般hashCode就是此对象的内存地址
昨天因为要从JFrame控件获取密码,注意到一个问题,那就是用toString方法得到的不一定是你想要的,如下: jPasswordField是JFrame中的密码输入框,如果用下面的方法是得不到密码 ...
- 猜拳游戏项目(涉及知识点Scanner、Random、For、数组、Break、Continue等)
package day03.d3.xunhuankongzhi; import java.util.Scanner; public class CaiQuan { public static void ...
- vs2008bin下Debug bll Release文件 obj下的Debug bll Release文件区别
Bin目录用来存放编译的结果,bin是二进制binrary的英文缩写,因为最初C编译的程序文件都是二进制文件,它有Debug和Release两个版本,分别对应的文件夹为bin/Debug和bin/Re ...