Bagaimana cara menggunakan CSS:
| Bagaimana cara kerjanya: <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(http://www.zishu.cn/attachments/month_0605/ r2 00652134132.gif);background-repeat: tidak ada pengulangan; tampilan:blok; posisi latar belakang:kiri atas;} #nav satu rentang{kursor:tangan; color:#000;background-image: url(/u/info_img/2009-05/30/v200652134115.gif);background-repeat: no-repeat; tampilan:blok;posisi latar belakang: kanan atas; bantalan:7px 10px 6px 10px; mengapung: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> |
一下为内容部分
| Bagaimana cara kerjanya: <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="/u/info_img/2009-05/30/x200652135342.gif" alt="新加栏目" /></div></li> </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> |