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

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

</style></p>
<div id="container">
<div id="title">
<ul>
    <li id="homepage"><a class="selectli" href="#"><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 cellspacing="2" cellpadding="0" width="58%" border="1">
        <tbody>
            <tr>
                <td align="center" width="70%"><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" class="js-smartPhoto-pc" target="_blank"><img height="290" width="250" alt="" src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" /></a></td>
                <td align="center" width="30%"><a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" class="js-smartPhoto-pc" target="_blank"><img height="290" width="15" alt="" src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" /></a></td>
            </tr>
        </tbody>
    </table>
    </li>
</ul>
</div>
</div>

提示：您可以先修改部分代码再运行

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

相关文章

精彩推荐