SOURCE

<ul class="nav">
  <li><a href="#">t1</a></li>
  <li><a href="#">t2</a></li>
  <li><a href="#">t3</a></li>
  <li class="selected"><a href="#">t4</a></li>
</ul>

<br />
<br />
<ol class="horizontal_nav">
  <li><a href="" rel="prev">pre</a></li>
  <li><a href="">t2</a></li>
  <li><a href="">t3</a></li>
  <li><a href="">t4</a></li>
  <li ><a href="" rel="next">next</a></li>
</ol>


<br />
<br />

<ul class="images_nav">
  <li><a href="">t1</a></li>
  <li><a href="">t2</a></li>
  <li><a href="">t3</a></li>
  <li><a href="">t4</a></li>
  <li><a href="">t5</a></li>
</ul>

<br />
<br />

<ul class="sliding-door">
  <li><a href="">t1</a></li>
  <li><a href="">t2</a></li>
  <li><a href="">t3</a></li>
  <li><a href="">t4</a></li>
  <li><a href="">t5</a></li>
</ul>


<br />
<br />


<div class="imagemap">
  <img src="http://joshua0125.test.upcdn.net/jingtongcss/charpter6/nerdcore.jpg" width="333px" height="500px" alt="" />
  
  <ul class="imageul">
    <li class="tom"><a href="" title="tom">tom</a></li>
    <li class="carlos"><a href="">carlos</a></li>
    <li class="joshua"><a href="">joshua</a></li>
    <li class="andy"><a href="">andy</a></li>
    <li class="lion"><a href="">lion</a></li>
  </ul>
  
</div>

ul.nav{
  list-style-type:none;
  margin:0;
  padding:0;
  background-color:#8bd400;
  border:1px solid #486b02;
  width:8em;
  
}

ul.nav a{
  display:block;
  color:#2b3f00;
  text-decoration:none;
  border-top:1px solid #e4ffd3;
  border-bottom:1px solid #486b02;
  padding:0.3em 1em;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/arrow.gif) no-repeat 5% 50%;
  
}

ul.nav li:last-child  a{
  border-bottom:0;
}



ul.nav li a:hover,ul.nav li a:focus,ul.nav .selected a{
  color:#e4ffd3;
  background-color:#6da203;
}
/* --------------------------- */
ol.horizontal_nav{
  list-style-type:none;
  margin:0;
  padding:0;
  /* width:3em; */
}

ol.horizontal_nav li {
  margin-right:0.6em;
  float:left;
}

ol.horizontal_nav  a,ol.horizontal_nav li.selected{
  display:block;
  border:1px solid  #ccc;
  text-decoration:none;
  padding:0.3em 0.5em;
}

ol.horizontal_nav a:hover,ol.horizontal_nav a:focus{
  background-color:blue;
  color:white;
}

ol.horizontal_nav a[rel="prev"],ol.horizontal_nav a[rel="next"]
{
  border:none;
}

ol.horizontal_nav a[rel="prev"]:before{
  content:"\00AB";
  padding-right:0.5em;
}

ol.horizontal_nav a[rel="next"]:after{
  content:"\00BB";
  PADDING-LEFT:.5em;
}
/* ---------------------------- */

ul.images_nav{
  list-style-type:none;
  margin:0;
  padding:0;
  width:72em;
  /*清除浮动*/
  overflow:hidden;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/mainNavBg.gif) repeat-x;
}
/* 给 li设置浮动 */
ul.images_nav li{
  float:left;
}

ul.images_nav a{
  text-decoration:none;
  /*使用padding控制间距*/  
  padding:0 3em;
  display:block;
  /* line-height:2.1em; */
  color:#fff;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/divider.gif) repeat-y left top;
}
/*这里不能有伪类前面不能有空格，还有first-child选择的是li元素不是a元素*/
ul.images_nav li:first-child a{
  background:none;
}

/* 反色给a元素添加 */
ul.images_nav a:hover,ul.images_nav a:focus{
  color:#333;
}

/* --------------------------- */

ul.sliding-door{
  margin:0;
  padding:0;
  list-style-type:none;
  overflow:hidden;
  /* width:72em; */
}

ul.sliding-door li{
  float:left;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/tab-right.gif) no-repeat right top;
}

ul.sliding-door a{
  display:block;
  padding:20px;
  text-decoration:none;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/tab-left.gif) no-repeat left top;
  color:#fff;
  
}

ul.sliding-door a:hover,ul.sliding-door a:focus{
  color:#333;
}

/* --------------------------- */
div.imagemap{
  width:333px;
  height:500px;
  position:relative;
}

.imagemap ul{
  margin:0;
  padding:0;
  list-style:none;
}


.imagemap a{
  position:absolute;
  display:block;
  width:50px;
  height:60px;
  text-indent:-1000em;
  
}

.imagemap a:hover,.imagemap a:focus{
  border:1px solid #fff;
}

.imagemap .tom a{
  top:50px;
  left:80px;
}