CSS模倣淘宝網ホームページナビゲーションバーレイアウト効果
著者：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{ マージン左:自動;マージン右:自動;幅:760ピクセル;テキスト整列:左;}
#new{ マージントップ:-12px;位置: 絶対;マージン左:-12px;}
#nav{ 高さ:30px;幅:610ピクセル;マージン左:自動;マージン右:自動;}
#nav li{マージン左:1px;高さ:30ピクセル;}
#nav li a{ 表示:ブロック;フロート:左;テキスト装飾:なし;背景画像: url( : no-repeat; 表示:ブロック; 背景位置: 右上; パディング:7px 10px 6px 10px; float:left; }
#nav li a:active,#nav li a:hover {margin-top:0px; }
#nav li a:アクティブ スパン、#nav li a:ホバー スパン {パディング:10px 10px 6px 10px;マージントップ:0px;表示:ブロック;色:#FFF;}
#zishu01 a:link,#zishu01 a:visited {背景位置: 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:ホバー スパン{背景位置:右 -57px;}
#zishu03 a:active,#zishu03 a:hover {背景位置: 0px -87px;}
#zishu03 a:アクティブ スパン、#zishu03 a:ホバー スパン{背景位置:右 -87px;}
#zishu04 a:active,#zishu04 a:hover {背景位置: 0px -117px;}
#zishu04 a:アクティブ スパン、#zishu04 a:ホバー スパン{背景位置:右 -117px;}
#zishu05 a:active,#zishu05 a:hover {背景位置: 0px -147px;}
#zishu05 a:アクティブ スパン、#zishu05 a:ホバー スパン{背景位置:右 -147px;}
#zishu06 a:active,#zishu06 a:hover {背景位置: 0px -177px;}
#zishu06 a:アクティブ スパン、#zishu06 a:ホバー スパン{背景位置:右 -177px;}
#zishu07 a:active,#zishu07 a:hover {背景位置: 0px -207px;}
#zishu07 a:アクティブ スパン、#zishu07 a:ホバー スパン{背景位置:右 -207px;}
#zishu08 a:active,#zishu08 a:hover {背景位置: 0px -237px;}
#zishu08 a:アクティブ スパン、#zishu08 a:ホバー スパン{背景位置:右 -237px;}
#zishu09 a:active,#zishu09 a:hover {背景位置: 0px -267px;}
#zishu09 a:アクティブ スパン、#zishu09 a:ホバー スパン{背景位置:右 -267px;}
#zishu10 a:active,#zishu10 a:hover {背景位置: 0px -297px;}
#zishu10 a:アクティブ スパン、#zishu10 a:ホバー スパン{背景位置:右 -297px;}
#zishu11 a:リンク スパン、#zishu11 a:訪問済みスパン{color:#FF6600;}
#zishu11 a:active,#zishu11 a:hover {背景位置: 0px -327px;}
#zishu11 a:アクティブ スパン、#zishu11 a:ホバー スパン{背景位置:右 -327px;}
#メニュー{幅:760ピクセル;高さ:26ピクセル;背景:#FF9900;}
#r1{ボーダートップ: 0px;ボーダーボトム: 0px;ボーダー左:3 ピクセルの実線 #fff;ボーダー右:3 ピクセルの実線 #fff;高さ:1ピクセル;オーバーフロー:非表示;}
#r2{ボーダートップ: 0px;ボーダーボトム: 0px;ボーダー左:2 ピクセルの実線 #fff;ボーダー右:2 ピクセルの実線 #fff;高さ:1ピクセル;オーバーフロー:非表示;}
#r3{ボーダートップ: 0px;ボーダーボトム: 0px;ボーダー左:1 ピクセルの実線 #fff;ボーダー右:1 ピクセルの実線 #fff;高さ:1ピクセル;オーバーフロー:非表示;}
</スタイル>
</head>
<本文>
<div id="情報">
<div id="ナビ">
<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>
