20种提升网页速度的技巧(4)

20种提升网页速度的技巧

list-style:none;

}

#nav li {

display:inline;

margin:0;

padding:0;

}

#nav a {

float:left;

background:url("tableftK.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#nav a span {

float:left;

display:block;

background:url("tabrightK.gif") no-repeat right top;

padding:5px 15px 4px 6px;

color:#FFF;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#nav a span {float:none;}

/* End IE5-Mac hack */

#nav a:hover span {

color:#FFF;

background-position:100% -42px;

}

#nav a:hover {

background-position:0% -42px;

}

#nav a:hover span {

background-position:100% -42px;

}

清单 2. 基于选项卡导航的 HTML 代码

<div id="nav">

<ul>

<li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

<li><a href="#" title="Link 5"><span>Link 5</span></a></li> </ul>