display: block;
width: auto;
background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323582.gif);
background-repeat: no-repeat;
background-position: left -87px;
}
#container #title #homepage a .selectspan {
display: block;
background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323449.gif);
background-position: right -87px;
padding-right: 15px;
padding-left: 15px;
}
#container #content {
border: 1px solid #3A81C8;
height: 200px;
padding: 10px;
}
#container #content ul {
margin: 10px;
}
#container #content li {
margin: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li id="homepage"><a href="#" class="selectli"><span class="selectspan">首页</span></a></li>
<li id="download"><a href="#"><span>下载中心</span></a></li>
<li id="product"><a href="#"><span>产品介绍</span></a></li>
<li id="login"><a href="#"><span>会员注册与登录</span></a></li>
<li id="contactus"><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
<div id="content">
<p>仿淘宝网站的导航效果。此方法有几个优点：</p>
<ul>
<li>根据字数自适应项目长度</li>
<li>不同的项目使用不同的颜色来区分</li>
<li>无需使用脚本</li>
<li>背景图片只需要两个图片文件就足够，减少服务器负担<br />
这是使用到的两个图片：
<table width="58%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="70%" align="center"><img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323582.gif" width="250" height="290" /></td>
<td width="30%" align="center"><img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323449.gif" width="15" height="290" /></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>
如果您对本文有任何疑问或者建议，请到讨论区发表您的意见:
>>
论坛入口 <<
上一篇： CSS样式用好表单的下拉式菜单 下一篇： CSS教程—元素的定位
【文章评论】
【收藏本文】
【推荐好友】
【打印本文】
【我要投稿】 【论坛讨论】
