Inicio>Tutorial de diseño web>efectos especiales web

Efecto de diseño de barra de navegación de la página de inicio de Taobao de imitación de CSS

Autor：Eve Cole Fecha de actualización：2009-06-12 19:27:43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<title>PRUEBA DE TAO BAO 2</title>
<estilo>
/* www.zishu.cn子鼠*/
cuerpo{ tamaño de fuente:12px; alineación de texto:centro; margen superior: 30px; familia de fuentes:Verdana;}
div,img{margen:0; relleno: 0; borde:0;}
ul,li{tipo-estilo-lista: ninguno; margen:0; relleno: 0; flotador: izquierda; }
#info{ margen-izquierdo:auto; margen derecho: automático; ancho: 760 px; alineación de texto: izquierda;}
#nuevo{ margen-superior:-12px;posición: absoluta;margen-izquierdo:-12px;}
#nav{altura:30px; ancho: 610 px; margen izquierdo: automático; margen derecho: automático;}
#navli{margen-izquierda:1px; altura: 30px;}
#nav li a{ display:block;float:left; decoración de texto: ninguna; imagen de fondo: url ( : sin repetición; visualización: bloque; posición de fondo: arriba derecha; relleno: 7 px 10 px 6 px 10 px; flotador: izquierda; }
#nav li a:activo,#nav li a:hover {margin-top:0px; }
#nav li a: intervalo activo, #nav li a: intervalo de desplazamiento {padding:10px 10px 6px 10px; margen superior: 0px; mostrar:bloquear; color:#FFF;}
#zishu01 a: enlace, #zishu01 a: visitado {posición de fondo: 0px -27px;}
#zishu01 a: intervalo de enlace, #zishu01 a: intervalo visitado{fondo-posición: derecha -27px; relleno:10px 10px 6px 10px; margen superior: 0; color:#FFF; peso de fuente: negrita;}
#zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-top:3px;}
#zishu02 a:activo,#zishu02 a:hover {posición-fondo: 0px -57px;}
#zishu02 a: intervalo activo, #zishu02 a: intervalo de desplazamiento {posición de fondo: derecha -57px;}
#zishu03 a:activo,#zishu03 a:hover {posición de fondo: 0px -87px;}
#zishu03 a: intervalo activo, #zishu03 a: intervalo de desplazamiento {posición de fondo: derecha -87px;}
#zishu04 a:activo,#zishu04 a:hover {posición-fondo: 0px -117px;}
#zishu04 a: intervalo activo, #zishu04 a: intervalo de desplazamiento {posición de fondo: derecha -117px;}
#zishu05 a:activo,#zishu05 a:hover {posición de fondo: 0px -147px;}
#zishu05 a: intervalo activo, #zishu05 a: intervalo de desplazamiento {posición de fondo: derecha -147px;}
#zishu06 a:activo,#zishu06 a:hover {posición de fondo: 0px -177px;}
#zishu06 a: intervalo activo, #zishu06 a: intervalo de desplazamiento {posición de fondo: derecha -177px;}
#zishu07 a:activo,#zishu07 a:hover {posición-fondo: 0px -207px;}
#zishu07 a: intervalo activo, #zishu07 a: intervalo de desplazamiento {posición de fondo: derecha -207px;}
#zishu08 a:activo,#zishu08 a:hover {posición de fondo: 0px -237px;}
#zishu08 a: intervalo activo, #zishu08 a: intervalo de desplazamiento {posición de fondo: derecha -237px;}
#zishu09 a:activo,#zishu09 a:hover {posición de fondo: 0px -267px;}
#zishu09 a: intervalo activo, #zishu09 a: intervalo de desplazamiento {posición de fondo: derecha -267px;}
#zishu10 a:activo,#zishu10 a:hover {posición de fondo: 0px -297px;}
#zishu10 a: intervalo activo, #zishu10 a: intervalo de desplazamiento {posición de fondo: derecha -297px;}
#zishu11 a: intervalo de enlaces,#zishu11 a: intervalo visitado{color:#FF6600;}
#zishu11 a:activo,#zishu11 a:hover {posición de fondo: 0px -327px;}
#zishu11 a: intervalo activo, #zishu11 a: intervalo de desplazamiento {posición de fondo: derecha -327px;}
#menú{ ancho:760px; altura: 26 píxeles; fondo:#FF9900;}
#r1{borde-superior: 0px; borde-inferior: 0px; borde izquierdo: 3px sólido #fff; borde derecho: 3px sólido #fff; altura: 1 px; desbordamiento: oculto;}
#r2{borde-superior: 0px; borde-inferior: 0px; borde izquierdo: 2px sólido #fff; borde derecho: 2px sólido #fff; altura: 1 px; desbordamiento: oculto;}
#r3{borde-superior: 0px; borde-inferior: 0px; borde izquierdo: 1 px sólido #fff; borde derecho: 1 px sólido #fff; altura: 1 px; desbordamiento: oculto;}
</estilo>
</cabeza>
<cuerpo>
<div id="información">
<div id="navegación">
<ul>
<li id="zishu01"> <a href=" http://www.zishu.cn"> <span >首页</span></a></li>
<li id="zishu02"> <a href=" http://www.zishu.cn"><span >数码通讯</span></a></li>
<li id="zishu03"> <a href=" http://www.zishu.cn"><span >女人</span></a></li>
<li id="zishu04"> <a href=" http://www.zishu.cn"><span >男人</span></a></li>
<li id="zishu05"> <a href=" http://www.zishu.cn"><span >家居</span></a></li>
<li id="zishu06"> <a href=" http://www.zishu.cn"><span >书籍音像</span></a></li>
<li id="zishu07"> <a href=" http://www.zishu.cn"><span >运动</span></a></li>
<li id="zishu08"> <a href=" http://www.zishu.cn"><span >游戏</span></a></li>
<li id="zishu09"> <a href=" http://www.zishu.cn"><span >宠物</span></a></li>
<li id="zishu10"> <a href=" http://www.zishu.cn"><span >香港街</span></a></li>
<li id="zishu11"> <a href=" http://www.zishu.cn"><span >淘宝商城</span></a></li>
<li><div id="nuevo"><img src=" </ul>
</div>
<div id="menú">
<div id="r1"></div>
<div id="r2"></div>
<div id="r3"></div>
<div></div>
</div>
</div>
<p>仿淘宝网首页导航条效果 转载请注明出处www.zishu.cn 2006-05-21 凌晨03:05分</p>
</cuerpo>
</html>
Artículos relacionados