CSS 모방 Taobao 홈페이지 탐색 모음 레이아웃 효과
저자：Eve Cole
업데이트 시간：2009-06-12 19:27:43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>타오바오 테스트 2</title>
<스타일>
/* www.zishu.cn子鼠*/
본문{글꼴 크기:12px; 텍스트 정렬:가운데; 여백 상단:30px; 글꼴 계열:Verdana;}
div,img{마진:0; 패딩:0; 테두리:0;}
ul,li{목록 스타일 유형: 없음; 여백:0; 패딩:0; 부동:왼쪽; }
#info{ 여백-왼쪽:자동; 여백 오른쪽:자동;너비:760px; 텍스트 정렬:왼쪽;}
#new{ margin-top:-12px;위치: 절대;margin-left:-12px;}
#nav{높이:30px; 너비:610px; 여백 왼쪽:자동; 여백 오른쪽:자동;}
#nav li{margin-left:1px; 높이:30px;}
#nav li a{ 디스플레이:블록;float:왼쪽; 텍스트 장식:없음; 배경 이미지: url( : 반복 없음; 디스플레이:블록;배경 위치: 오른쪽 상단; 패딩:7px 10px 6px 10px; 부동:왼쪽; }
#nav li a:active,#nav li a:hover {margin-top:0px; }
#nav li a:활성 범위,#nav li a:hover 범위 {패딩:10px 10px 6px 10px; 여백 상단:0px; 표시:블록; 색상:#FFF;}
#zishu01 a:링크,#zishu01 a:방문 {배경 위치: 0px -27px;}
#zishu01 a:링크 범위,#zishu01 a:방문 범위{배경-위치:오른쪽 -27px;패딩:10px 10px 6px 10px; 여백 상단:0; 색상:#FFF; 글꼴 두께:굵게;}
#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:active,#zishu02 a:hover {배경 위치: 0px -57px;}
#zishu02 a:활성 범위,#zishu02 a:hover 범위{배경 위치:오른쪽 -57px;}
#zishu03 a:활성,#zishu03 a:hover {배경 위치: 0px -87px;}
#zishu03 a:활성 범위,#zishu03 a:hover 범위{배경 위치:오른쪽 -87px;}
#zishu04 a:active,#zishu04 a:hover {배경 위치: 0px -117px;}
#zishu04 a:활성 범위,#zishu04 a:hover 범위{배경 위치:오른쪽 -117px;}
#zishu05 a:활성,#zishu05 a:hover {배경 위치: 0px -147px;}
#zishu05 a:활성 범위,#zishu05 a:hover 범위{배경 위치:오른쪽 -147px;}
#zishu06 a:active,#zishu06 a:hover {배경 위치: 0px -177px;}
#zishu06 a:활성 범위,#zishu06 a:hover 범위{배경 위치:오른쪽 -177px;}
#zishu07 a:active,#zishu07 a:hover {배경 위치: 0px -207px;}
#zishu07 a:활성 범위,#zishu07 a:hover 범위{배경 위치:오른쪽 -207px;}
#zishu08 a:활성,#zishu08 a:hover {배경 위치: 0px -237px;}
#zishu08 a:활성 범위,#zishu08 a:hover 범위{배경 위치:오른쪽 -237px;}
#zishu09 a:active,#zishu09 a:hover {배경 위치: 0px -267px;}
#zishu09 a:활성 범위,#zishu09 a:hover 범위{배경 위치:오른쪽 -267px;}
#zishu10 a:활성,#zishu10 a:hover {배경 위치: 0px -297px;}
#zishu10 a:활성 범위,#zishu10 a:hover 범위{배경 위치:오른쪽 -297px;}
#zishu11 a:링크 범위,#zishu11 a:방문 범위{color:#FF6600;}
#zishu11 a:활성,#zishu11 a:hover {배경 위치: 0px -327px;}
#zishu11 a:활성 범위,#zishu11 a:hover 범위{배경 위치:오른쪽 -327px;}
#메뉴{너비:760px; 높이:26px; 배경:#FF9900;}
#r1{테두리 상단: 0px;테두리 하단: 0px; 테두리 왼쪽:3px 단색 #fff;경계 오른쪽:3px 단색 #fff; 높이:1px; 오버플로:숨김;}
#r2{테두리 상단: 0px;테두리 하단: 0px; 테두리 왼쪽:2px 단색 #fff;경계 오른쪽:2px 단색 #fff; 높이:1px; 오버플로:숨김;}
#r3{테두리 상단: 0px;테두리 하단: 0px; 테두리 왼쪽:1px 솔리드 #fff;테두리 오른쪽:1px 솔리드 #fff; 높이:1px; 오버플로:숨김;}
</style>
</head>
<본문>
<div 아이디="정보">
<div id="nav">
<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="new"><img src=" </ul>
</div>
<div id="메뉴">
<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>
</body>
</html>
