<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!--* { margin: 0; padding:0}body { margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; height: auto; width: auto; background-color: #666666; font-size: 12px; color: #000000;}#container { text-align: left; width: 760px; height: 400px; background-color: #FFFFFF; padding: 20px;}
#container #title { height: 31px; background-color: #3A81C8;}#container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px;}#container #title ul { background-color: #FFFFFF; height: 28px;}#container #title a { text-decoration: none; color: #000000; display: block; width: auto; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323582.gif); background-repeat: no-repeat; background-position: left -29px;}#container #title a span{ display: block; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323449.gif); background-repeat: no-repeat; background-position: right -29px; padding-right: 15px; padding-left: 15px; }#container #title a:hover { text-decoration: none; color: #000000; 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 a:hover span{ 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 #title #download a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323582.gif); background-repeat: no-repeat; background-position: left 0px;}#container #title #download a:hover span{ display: block; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323449.gif); background-position: right 0px; padding-right: 15px; padding-left: 15px; }#container #title #product a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323582.gif); background-repeat: no-repeat; background-position: left -58px;}#container #title #product a:hover span{ display: block; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323449.gif); background-position: right -58px; padding-right: 15px; padding-left: 15px; }#container #title #login a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323582.gif); background-repeat: no-repeat; background-position: left -145px;}#container #title #login a:hover span{ display: block; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323449.gif); background-position: right -145px; padding-right: 15px; padding-left: 15px; }#container #title #contactus a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323582.gif); background-repeat: no-repeat; background-position: left -174px;}#container #title #contactus a:hover span{ display: block; background-image: url(http://webdesign.chinaitlab.com/UploadFiles_8014/200609/20060913225323449.gif); background-position: right -174px; padding-right: 15px; padding-left: 15px; }#container #title #homepage .selectli { text-decoration: none; color: #ffffff; 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>
Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长:MinTao ICP备案号:鄂ICP备11006601号-18