悠悠博客 关注Ajax技术与web开发

XHTML:
<div class="wrapper">
 <ul id="example7"
   ><li class="aloe"><a href="#">Aloe</a></li
   ><li class="berg"><a href="#">Bergamot</a></li
   ><li class="cale"><a href="#">Calendula</a></li
   ><li class="dami"><a href="#">Damiana</a></li
   ><li class="elde"><a href="#">Elderflower</a></li
   ><li class="feve"><a href="#">Feverfew</a></li
   ><li class="ging"><a href="#">Ginger</a></li
   ><li class="hops"><a href="#">Hops</a></li
   ><li class="iris"><a href="#">Iris</a></li
   ><li class="juni"><a href="#">Juniper</a></li
   ><li class="kava"><a href="#">Kava kava</a></li
   ><li class="lave"><a href="#">Lavender</a></li
   ><li class="marj"><a href="#">Marjoram</a></li
   ><li class="nutm"><a href="#">Nutmeg</a></li
   ><li class="oreg"><a href="#">Oregano</a></li
   ><li class="penn"><a href="#">Pennyroyal</a></li
 ></ul>
</div><!-- .wrapper -->
CSS:
/* separate list from subsequent content */
div.wrapper
{
 margin-bottom: 1em;
}
ul#example7
{
 width: 30em;
 margin: 0;
 padding: 0;
 border: 1px solid #A52A2A; /* brown */
 background-image: url("SophieAresPilonPale.jpg");
}
ul#example7 li
{
 /* list item dimensions */

 width: 10em;
 height: 2em;

 /* Clear the default margins & padding
 for cross-browser efficiency */
 margin: 0;
 padding: 0;

 /* suppress item markers */
 list-style-type: none;
}

/* Purty it up */
ul#example7 li a
{
 display: block;
 width: 10em;
 line-height: 2em;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 color: #A52A2A; /* brown */
}
/* mouseover gets the bright photo */
ul#example7 li a:hover
{
 color: #FFF; /* white */
 background-image: url("SophieAresPilonBright.jpg");
}

/* give each list item a piece of the picture */

li.aloe a { background-position: 0em -0em }
li.berg a { background-position: 0em -2em }
li.cale a { background-position: 0em -4em }
li.dami a { background-position: 0em -6em }
li.elde a { background-position: 0em -8em }

li.feve a { background-position: -10em -0em }
li.ging a { background-position: -10em -2em }
li.hops a { background-position: -10em -4em }
li.iris a { background-position: -10em -6em }
li.juni a { background-position: -10em -8em }

li.kava a { background-position: -20em -0em }
li.lave a { background-position: -20em -2em }
li.marj a { background-position: -20em -4em }
li.nutm a { background-position: -20em -6em }
li.oreg a { background-position: -20em -8em }
li.penn a { background-position: -20em -10em }
/* Bring the first item of each column
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 2em line-height = 10em */

ul#example7 li.feve,
ul#example7 li.kava
{
 margin-top: -10em;
}

/* Horizontal positions of the columns */
ul#example7 li.aloe,
ul#example7 li.berg,
ul#example7 li.cale,
ul#example7 li.dami,
ul#example7 li.elde
{
 margin-left: 0em;
}
ul#example7 li.feve,
ul#example7 li.ging,
ul#example7 li.hops,
ul#example7 li.iris,
ul#example7 li.juni
{
 margin-left: 10em;
}
ul#example7 li.kava,
ul#example7 li.lave,
ul#example7 li.marj,
ul#example7 li.nutm,
ul#example7 li.oreg,
ul#example7 li.penn
{
 margin-left: 20em;
}