• 仿淘宝网站的导航标签效果！

    <!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://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
        background-repeat    : no-repeat;
        background-position    : left -29px;
    }
    #container #title a span    {
        display    : block;
        background-image    : url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.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://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
        background-repeat    : no-repeat;
        background-position    : left -87px;
    }
    #container #title a:hover span    {
        display    : block;
        background-image    : url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.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://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
        background-repeat    : no-repeat;
        background-position    : left 0px;
    }
    #container #title #download a:hover span    {
        display    : block;
        background-image    : url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.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://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
        background-repeat    : no-repeat;
        background-position    : left -58px;
    }
    #container #title #product a:hover span    {
        display    : block;
        background-image    : url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.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://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
        background-repeat    : no-repeat;
        background-position    : left -145px;
    }
    #container #title #login a:hover span    {
        display    : block;
        background-image    : url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.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://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
        background-repeat    : no-repeat;
        background-position    : left -174px;
    }
    #container #title #contactus a:hover span    {
        display    : block;
        background-image    : url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.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://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif);
        background-repeat    : no-repeat;
        background-position    : left -87px;
    }
    #container #title #homepage a .selectspan     {
        display    : block;
        background-image    : url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.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://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
                     <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
                   </tr>
                 </table>
              </li>
            </ul>
        
          </div>  
    </div>
    </body>
    </html>
  • 相关阅读:
    【MapReduce】三、MapReduce运行机制
    【MapReduce】二、MapReduce编程模型
    【MapReduce】一、MapReduce简介与实例
    配置集成测试环境 phpstudy
    系统安装
    项目测试的流程
    黑.白盒测试
    黑盒测试等价划分实例
    软件测试的概述
    单元测试框架unitest和自动化测试高级应用
  • 原文地址：https://www.cnblogs.com/wangyong969/p/1048437.html
Copyright © 2020-2023  润新知