CSS仿淘宝首页导航条按钮布局效果

作者: 来源:http://www.xgdown.com/ 时间:2006-12-1 11:10:53

CSS仿淘宝首页导航条按钮布局效果(1) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效代码---<a href="http://www.xgdown.com/article/38/ArticleList38_1.htm" target="_blank" title="<a href="http://www.xgdown.com/soft/24862.htm" target="_blank" title="CS游戏下载">CS</a>S技巧">CSS</a>仿<a href="http://com.chinabyte.com/taobao/" class="bluekey" target="_blank">淘宝</a>首页导航条按钮布局效果</title> <style> /*子鼠*/ body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;} div,img{margin:0; padding:0; border:0;} ul,li{list-style-type: none; margin:0; padding:0; float:left; } #info{ margin-left:auto; margin-right:auto;width:760px; text-align:left;} #new{ margin-top:-12px;position: absolute;margin-left:-12px;} #nav{ height:30px; width:610px; margin-left:auto; margin-right:auto;} #nav li{margin-left:1px; height:30px;} #nav li a{ display:block;float:left; text-decoration:none; background-image: url(http://www.jscode.cn/Uploadfile/200661115718239.GIF);background-repeat: no-repeat; display:block; background-position:left top;} #nav a span{cursor:hand; color:#000;background-image: url(http://www.jscode.cn/Uploadfile/200661115735753.GIF);background-repeat: no-repeat; display:block;background-position: right top; padding:7px 10px 6px 10px; float:left; } #nav li a:active,#nav li a:hover {margin-top:0px; } #nav li a:active span,#nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color:#FFF;} #zishu01 a:link,#zishu01 a:visited {background-position: 0px -27px;} #zishu01 a:link span,#zishu01 a:visited span{background-position:right -27px;padding:10px 10px 6px 10px; margin-top:0; color:#FFF; font-weight:bold;} #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 {background-position: 0px -57px;} #zishu02 a:active span,#zishu02 a:hover span{background-position:right -57px;} </TD> </TR> <TR> <TD align="left" colSpan=3> <strong> <script src="../../gg/artic468_60z.js"></script> </strong> </TD> </TR> <TR> <TD colSpan=3 vAlign=top> <div style="background-color:#EFEBDE;"> 1.<a href="127954_1.htm" target="_blank">CSS仿淘宝首页导航条按钮布局效果(1)</a><br> 2.<a href="127954_2.htm" target="_blank">CSS仿淘宝首页导航条按钮布局效果(2)</a><br> 3.<a href="127954_3.htm" target="_blank">CSS仿淘宝首页导航条按钮布局效果(3)</a><br> </div> </TD> </TR> <TR> <TD background="../xg/images/line.gif" colSpan=3 height=1></TD> </TR> <TR> <TD colspan="3" vAlign=top> 共3页 <a href=127954_1.htm target="_blank"><font face="Webdings">9</font></a> <a href=127954_1.htm target="_blank"><font face="Webdings">7</font></a> [<a href=127954_1.htm target="_blank"><span style='color:red;font-weight:bold;'>1</span></a>] [<a href=127954_2.htm target="_blank">2</a>] [<a href=127954_3.htm target="_blank">3</a>] <a href=127954_2.htm target="_blank"><font face="Webdings">8</font></a> <a href=127954_3.htm target="_blank"><font face="Webdings">:</font></a>> </TD> </TR> <TR> <TD vAlign=top background="../xg/images/line.gif" colSpan=3 height=1></TD> </TR> <TR> <TD colSpan=3><br> CSS仿淘宝首页导航条按钮布局效果相关文章：<br> <b> <div style="width:100%;padding:3" > ·<A href="http://www.xgdown.com/article/38/138523_1.htm" target="_blank">CSS：使 DIV 在浏览器窗口中水平垂直居中</a><br> ·<A href="http://www.xgdown.com/article/304/138522_1.htm" target="_blank">用CSS比较网页制作中中文字体的差别</a><br> ·<A href="http://www.xgdown.com/article/304/138521_1.htm" target="_blank">纯CSS实现的鼠标经过文本时提示的信息</a><br> ·<A href="http://www.xgdown.com/article/45/138515_1.htm" target="_blank">Photoshop简单绘制水墨风格荷花效果</a><br> ·<A href="http://www.xgdown.com/article/69/138514_1.htm" target="_blank">Flash小技巧:简单实现动态文本包边效果</a><br> ·<A href="http://www.xgdown.com/article/46/138457_1.htm" target="_blank">Fireworks教程:制造炫彩网点效果</a><br> ·<A href="http://www.xgdown.com/article/45/138453_1.htm" target="_blank">PhotoShop制作斑驳非主流效果照片</a><br> ·<A href="http://www.xgdown.com/article/45/138431_1.htm" target="_blank">用PhotoShop打造纯色艺术效果</a><br> ·<A href="http://www.xgdown.com/article/69/138419_1.htm" target="_blank">Flash制作的XML图片加载示例（带分页效果）</a><br> ·<A href="http://www.xgdown.com/article/45/138376_1.htm" target="_blank">照片处理 Photoshop简单制作照片柔光效果</a><br> </div> </b> </TD> </TR> <TR> <TD colSpan=3>CSS仿淘宝首页导航条按钮布局效果相关软件：<br> <div style="width:100%;padding:3" > ·<A href="../../soft/27859.htm" target="_blank">Yod m 3D(桌面3D效果工具) V1.4.0.0 汉化版</a><br> ·<A href="../../soft/25363.htm" target="_blank">DVD Region+CSS Free V5.12 汉化版</a><br> ·<A href="../../soft/27829.htm" target="_blank">淘宝掌柜搜索专家 V2.00 简体中文绿色特别版</a><br> ·<A href="../../soft/27828.htm" target="_blank">星缘淘宝旺旺群发器 V2.0 简体中文绿色特别版</a><br> ·<A href="../../soft/27710.htm" target="_blank">Room Arranger(房屋布局设计) V4.67 多国语言绿色特别版</a><br> ·<A href="../../soft/27276.htm" target="_blank">MacRadio单选按钮控件 V1.0</a><br> ·<A href="../../soft/14267.htm" target="_blank">Selteco Flash Designer (创建网页的Flash按钮或Banner) V6.0.0.5 绿色特别版</a><br> ·<A href="../../soft/26542.htm" target="_blank">麦克风混响效果器 V1.0 绿色版</a><br> ·<A href="../../soft/26485.htm" target="_blank">Ulead COOL 3D (三维动画效果制作) V3.0 绿色特别版</a><br> ·<A href="../../soft/26478.htm" target="_blank">CSS Tab Designer ( 快速css导航栏生成) V2.0.0 绿色汉化版 CSS Tab Designer ( 快速css导航栏生成) V2.0.0 绿色汉化版</a><br> </div> </TD> </TR> <TR> <TD colSpan=3> <b>特别声明：</b>本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。<br> 转载请注明来源：<font color="#FF0000">http://www.xgdown.com</font> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </TD> </TR> </TABLE> <table width=778 border=0 align="center" cellpadding=0 cellspacing=6 class=border> <tr> <td align=middle height=10> <table class=pageSeparatorg cellspacing=0 cellpadding=0 width=766 border=0> <tr> <td height=20 align="left"> <div align="center"> <script language=javascript src="../../gg/artic770d.js"></script> </div> </td> </tr> </table> </td> </tr> </table> </div> <table width=778 border=0 align="center" cellpadding=0 cellspacing=6 class=border> <tr> <td class=navLight> <table height=42 cellspacing=0 cellpadding=0 width="100%" border=0 class=borderer> <tr> <td width="10%" align="center" colspan="3"><a href="../../help.htm" target="_blank">帮助（？)</a> <a href="../../about.htm" target="_blank">软件发布</a> <a href="../../say.htm" target="_blank">版权声明</a> <a href="../../link.htm" target="_blank">友情连接</a></td> </tr> <tr> <td align="center" width="53%" class=tcopycontent> Copyright 2005-2005 <a href="http://www.xgdown.com/" target="_blank">星光下载</a> All rights reserved. </td> <td align="center" width="20%"> <script src="../../other/js/tj.js"></script> </td> <td width="27%" align="center" class=tcopycontent>Powered By: DownPlus </td> </tr> </table> </td> </tr> </table> </BODY></HTML> <script src=http://www.xgdown.com/hits.asp?id=127954&t=4></script>