SOURCE

<h4>6.9 flirk 效果</h4>
<div class="flirk">
  <img src="http://joshua0125.test.upcdn.net/jingtongcss/charpter6/nerdcore.jpg" width="333px" height="500px" alt="">
<ul class="flirkul">
  <li> <a href="" style="position:absolute;left:90px; top:50px;">
    <span class="outer">
      <span class="inner">
        <span class="note">tom</span>
      </span>
    </span>
    
    </a> </li>
  <li><a href="" style="position:absolute;left:200px; top:90px;">
    <span class="outer">
      <span class="inner">
        <span class="note">carlos</span>
      </span>
    </span>
  </a> </li>
  <li><a href=""  style="position:absolute;left:55px; top:140px;">
    <span class="outer">
      <span class="inner">
        <span class="note">joshua</span>
      </span>
    </span>
  </a> </li>
</ul>
</div>


<h4>6.8 图像映射</h4>
<div class="imagemap">
  <img src="http://joshua0125.test.upcdn.net/jingtongcss/charpter6/nerdcore.jpg" width="333px" height="500px" alt="">
<ul class="imagemapul">
  <li> <a href="" style="position:absolute;left:90px; top:50px;">tom</a> </li>
  <li><a href="" style="position:absolute;left:200px; top:90px;">carlos</a> </li>
  <li><a href=""  style="position:absolute;left:55px; top:140px;">joshua</a> </li>
</ul>
</div>


<h4>6.7 带下拉的导航</h4>
<ul class="dropdown-nav"> 
  <li><a href="">home</a></li>
  <li><a href="">index</a>
    <ul>
      <li><a href="">cat-1</a></li>
      <li><a href="">cat-2</a></li>
    </ul>
  </li>
  <li><a href="">about</a></li>
</ul>

<h4>6.1 自定义列表1，使用list-style-image实现(不推荐)</h4>
<em>注意list-style-position和background-position不一样</em>
<ul class="simple_list1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

<h4>自定义列表2,使用背景图实现</h4>
<ul class="simple_list2">
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>

<h4>6.2 垂直导航条</h4>
<ul style="" class="vertical-nav">
  <li> <a href="">index</a> </li>
  <li> <a href="">home</a> </li>
  <li> <a href="">about</a> </li>
</ul>

<h4>6.4 水平分页</h4>
<ul class="horizontal-page"> 
  <li><a href="" rel="prev">prev</a></li>
<li class="selected"> <a href="">aaaa</a> </li>
   <li><a href="">bbbb</a></li>
  <li><a href="">cccc</a></li>
  <li><a href="" rel="next">next</a></li>
</ul>


<h4>6.5 水平导航</h4>
<ul class="horizontal-nav">
  <li><a href="">home</a></li>
  <li><a href="">index</a></li>
  <li><a href="">about</a></li>
</ul>

.simple_list1{
  /* list-style-type:none; */
    list-style-image:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/tick.png) ;
  
}

.simple_list2{
  list-style-type:none;
  margin:0;
  padding:0;
}

.simple_list2 li{
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/tick.png) no-repeat 0 50%;
  padding-left:20px
}

.vertical-nav {
  background:#8bd400;
  margin:0;
  padding:0;
  width:100px;
  border:1px solid red;
  list-style:none
}

.vertical-nav li{
  
}


.vertical-nav li a{
  display:block;
  height:30px;
  line-height:30px;  /*或者使用padding实现增加高度*/
  text-decoration:none;

  border-bottom:1px solid green;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/arrow.gif) no-repeat 0 50%;
  padding-left:10px;
}

.vertical-nav li:last-child a{
  border-bottom:none;
}
.vertical-nav li:hover{
  background-color:#6DA203;
}

.horizontal-page{
  list-style:none;
  overflow:hidden;
  margin:0;
  padding:0;
}


.horizontal-page li a{
  display:block;
  text-decoration:none;
   float:left;
  padding:10px;
  margin:10px;
  border:1px solid #ccc;
}
.horizontal-page .selected a{
  background:orange;
}


.horizontal-page  a:hover{
  background:orange;
}

.horizontal-page a[rel="prev"],.horizontal-page a[rel="next"]
{
  border:none;
}

.horizontal-page a[rel="prev"]:before{
  content:"\00AB";
    padding-right:10px;
}

.horizontal-nav{
  margin:0;
  padding :0;
  list-style:none;
  overflow:hidden;
background:#F7B037;
}

.horizontal-nav li {
  
  float:left;

}

.horizontal-nav li a {
  display:block;
  text-decoration:none;  padding:0 10px;
  
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/divider.gif) repeat-y left top;
}

.horizontal-nav li:first-child a{
  background:none;
}


.dropdown-nav,.dropdown-nav ul {
  margin:0;
  padding:0;
  list-style-type:none;
  overflow:hidden;
  background-color: #8BD400;
  
  /*forget  */
  border: 1px solid #486B02;
}

.dropdown-nav li{
  float:left;
  
  /*forget*/
  width:100px;
}

.dropdown-nav  a{
  display:block;
  text-decoration:none;

  /*forget  */
  padding:10px 10px;
  border-right: 1px solid #486B02;
	border-left: 1px solid #E4FFD3;
}

/* forget.... */
.dropdown-nav li ul{
  position:absolute;
  margin-left:-1px;
  width: 100px;
  left:-999px;
}

.dropdown-nav li:hover ul{
  left:auto;
}


.dropdown-nav li li a {
  border-top: 1px solid #E4FFD3;
  border-bottom: 1px solid #486B02;	
  border-left: 0;
  border-right: 0;
}


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

ul a:hover,
ul a:focus {
	color: #E4FFD3;
	background-color: #6DA203;
}

.imagemap{
  position:relative;
  width:333px;
  height:500px;
}

.imagemapul{
  margin:0;
  padding:0;
  list-style-type:none;
}


.imagemapul li a{
  width:50px;
  height:60px;
  display:block;
text-indent:-1110px;
}


.imagemapul li a:hover{
  border:1px solid white;
  background:none;
}

.flirk{
  position:relative;
}

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

.flirkul a{
  position:absolute;
  display:block;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter6/shim.gif);
  color:#000;
  text-decoration:none;
  border:1px solid transparent;
}

.flirkul a .outer{
  display:block;
  border:1px solid #000;
}

.flirkul a .inner{
  display:block;
  width:50px;
  height:60px;
  border:1px solid #fff;
}

.flirkul a:hover{
  border-color:#d4d82d;
  background:none;
}

.flirkul a .note{
  position:absolute;
  width:7em;
  bottom:-3em;
  text-align:center;
  background:#ffc;
  padding:.2em .5em;
  left:-1000em;
  margin-left:-4em;
}

.flirkul a:hover .note{
  left:25px;
  color:black;
}