<!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(/Article/picture/200609/20060915105448637.gif); background-repeat: no-repeat; background-position: left -29px; } #container #title a span{ display: block; background-image: url(/Article/picture/200609/20060915105451987.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(/Article/picture/200609/20060915105448637.gif); background-repeat: no-repeat; background-position: left -87px; } #container #title a:hover span{ display: block; background-image: url(/Article/picture/200609/20060915105451987.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(/Article/picture/200609/20060915105448637.gif); background-repeat: no-repeat; background-position: left 0px; } #container #title #download a:hover span{ display: block; background-image: url(/Article/picture/200609/20060915105451987.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(/Article/picture/200609/20060915105448637.gif); background-repeat: no-repeat; background-position: left -58px; } #container #title #product a:hover span{ display: block; background-image: url(/Article/picture/200609/20060915105451987.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(/Article/picture/200609/20060915105448637.gif); background-repeat: no-repeat; background-position: left -145px; } #container #title #login a:hover span{ display: block; background-image: url(/Article/picture/200609/20060915105451987.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(/Article/picture/200609/20060915105448637.gif); background-repeat: no-repeat; background-position: left -174px; } #container #title #contactus a:hover span{ display: block; background-image: url(/Article/picture/200609/20060915105451987.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(/Article/picture/200609/20060915105448637.gif); background-repeat: no-repeat; background-position: left -87px; } #container #title #homepage a .selectspan { display: block; background-image: url(/Article/picture/200609/20060915105451987.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="/Article/picture/200609/20060915105448637.gif" width="250" height="290" /></td> <td width="30%" align="center"><img src="/Article/picture/200609/20060915105451987.gif" width="15" height="290" /></td> </tr> </table> </li> </ul> </div> </div> </body> </html>
|