Beranda>Tutorial Desain Web>Efek khusus web

Efek tata letak bilah navigasi beranda Taobao imitasi CSS

Penulis：Eve Cole Waktu Pembaruan：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 ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>UJI TAO BAO 2</title>
<gaya>
/* www.zishu.cn子鼠*/
badan{ ukuran font:12px; perataan teks:tengah; margin-atas:30 piksel; font-keluarga:Verdana;}
div,img{margin:0; bantalan:0; perbatasan:0;}
ul,li{tipe-gaya daftar: tidak ada; margin:0; bantalan:0; mengapung:kiri; }
#info{ margin-kiri:otomatis; margin-kanan:otomatis;lebar:760px; perataan teks:kiri;}
#baru{ margin-atas:-12px;posisi: absolut;margin-kiri:-12px;}
#nav{ tinggi:30 piksel; lebar:610 piksel; margin-kiri:otomatis; margin-kanan:otomatis;}
#nav li{margin-kiri:1px; tinggi:30 piksel;}
#nav li a{ tampilan:blok;float:kiri; dekorasi teks: tidak ada; gambar latar belakang: url( : tanpa pengulangan; tampilan:blok;posisi latar belakang: kanan atas; padding:7px 10px 6px 10px; float:kiri; }
#nav li a:aktif,#nav li a:hover {margin-top:0px; }
#nav li a:rentang aktif,#nav li a:hover span {padding:10px 10px 6px 10px; margin-atas:0px; tampilan:blok; warna:#FFF;}
#zishu01 a:link,#zishu01 a:visited {posisi latar belakang: 0px -27px;}
#zishu01 a:link span,#zishu01 a:visited span{background-position:right -27px;padding:10px 10px 6px 10px; margin-atas:0; warna:#FFF; berat font:tebal;}
#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:aktif,#zishu02 a:hover {posisi latar belakang: 0px -57px;}
#zishu02 a:rentang aktif,#zishu02 a:hover span{background-position:right -57px;}
#zishu03 a:aktif,#zishu03 a:hover {posisi latar belakang: 0px -87px;}
#zishu03 a:rentang aktif,#zishu03 a:hover span{background-position:right -87px;}
#zishu04 a:aktif,#zishu04 a:hover {posisi latar belakang: 0px -117px;}
#zishu04 a:rentang aktif,#zishu04 a:hover span{background-position:right -117px;}
#zishu05 a:aktif,#zishu05 a:hover {posisi latar belakang: 0px -147px;}
#zishu05 a:rentang aktif,#zishu05 a:hover span{background-position:right -147px;}
#zishu06 a:aktif,#zishu06 a:hover {posisi latar belakang: 0px -177px;}
#zishu06 a:rentang aktif,#zishu06 a:hover span{background-position:right -177px;}
#zishu07 a:aktif,#zishu07 a:hover {posisi latar belakang: 0px -207px;}
#zishu07 a:rentang aktif,#zishu07 a:hover span{background-position:right -207px;}
#zishu08 a:aktif,#zishu08 a:hover {posisi latar belakang: 0px -237px;}
#zishu08 a:rentang aktif,#zishu08 a:hover span{background-position:right -237px;}
#zishu09 a:aktif,#zishu09 a:hover {posisi latar belakang: 0px -267px;}
#zishu09 a:rentang aktif,#zishu09 a:hover span{background-position:right -267px;}
#zishu10 a:aktif,#zishu10 a:hover {posisi latar belakang: 0px -297px;}
#zishu10 a:rentang aktif,#zishu10 a:hover span{background-position:right -297px;}
#zishu11 a:rentang tautan,#zishu11 a:rentang yang dikunjungi{color:#FF6600;}
#zishu11 a:aktif,#zishu11 a:hover {posisi latar belakang: 0px -327px;}
#zishu11 a:rentang aktif,#zishu11 a:hover span{background-position:right -327px;}
#menu{ lebar:760 piksel; tinggi:26 piksel; latar belakang:#FF9900;}
#r1{batas-atas: 0px;batas-bawah: 0px; batas-kiri:3px padat #fff;batas-kanan:3px padat #fff; tinggi:1 piksel; meluap: tersembunyi;}
#r2{batas-atas: 0px;batas-bawah: 0px; batas-kiri:2px padat #fff;batas-kanan:2px padat #fff; tinggi:1 piksel; meluap: tersembunyi;}
#r3{batas-atas: 0px;batas-bawah: 0px; batas-kiri:1px padat #fff;batas-kanan:1px padat #fff; tinggi:1 piksel; meluap: tersembunyi;}
</gaya>
</kepala>
<tubuh>
<div id="info">
<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="baru"><img src=" </ul>
</div>
<div id="menu">
<div id="r1"></div>
<div id="r2"></div>
<div id="r3"></div>
<div></div>
</div>
</div>
<p>仿淘宝网首页导航条效果 转载请注明出处www.zishu.cn 21-05-2006 凌晨03:05分</p>
</tubuh>
</html>
Artikel Terkait