面包屑导航：面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路，所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。
下面卓杰科技来叫大家怎么制作面包屑导航。
一、先建一个HTML写上
<ul class="bng">
  <li>面包屑一<em></em><i></i></li>
  <li class="current">面包屑二<em></em><i></i></li>
  <li>面包屑二<em></em><i></i></li>
</ul>
二、建一个CSS样式，写上
.bng{
  width:600px;
  margin:100px auto;
  background:#f0f0f0;
  height:32px;
  overflow:hidden;
  line-height:32px;
  position:relative;
}
.bng li{
  float:left;
  width:200px;
  text-align:center;
  position:relative;
  z-index:2;
  font-weight:bold;
  font-size:14px;
}
.bng li em{
  position:absolute;
  right:-24px;
  top:-8px;
  width:0;
  height:0;
  line-height:0;
  border-width:24px 0 24px 24px;
  border-color:transparent  transparent transparent #fff;
  border-style:dashed dashed dashed solid;
}
.bng li i{
  position:absolute;
  right:-16px;
  top:0;
  width:0;
  height:0;
  line-height:0;
  border-width:16px 0 16px 16px;
  border-color:transparent  transparent transparent #f0f0f0;
  border-style:dashed dashed dashed solid;
}
.bng li.current{
  background:#f60;
  color:#fff;
  z-index:1;
}
.bng li.current i{
  border-color:transparent  transparent transparent #f60;
}

纯CSS翻页效果

一、样式
<style>

dl {
 position:absolute;
 width:389px;
 height:154px;
 border:10px solid #eee;
 }
dd {
 margin:0;
 width:389px;
 height:154px;
 overflow:hidden;
 }
img {
 border:1px solid black
 }
dt {
 position:absolute;
 right:3px;
 top:50px;
 }
a {
 display:block;
 margin:1px;
 width:20px;
 height:20px;
 text-align:center;
 font:700 12px/20px "宋体",sans-serif;
 color:#fff;
 text-decoration:none;
 background:#666;
 border:1px solid #fff;
 filter:alpha(opacity=40);
 opacity:.4;
 }
a:hover {
 background:#000
 }
</style>
二、HTML

<dl>
<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>
<dd>
<img src="/uploadfile/200806/17/86181645617.jpg" alt="" title="" id="a" />
<img src="/uploadfile/200806/17/61181646102.jpg" alt="" title="" id="b" />
<img src="/uploadfile/200806/17/D9181646550.jpg" alt="" title="" id="c" />
</dd>
</dl>