HTML简单实现京东商城底部导航

来源：互联网发布：网络研发人员薪酬设计编辑：程序博客网时间：2024/05/29 07:52

HTML实现京东商城底部导航

京东商城底部截图：

比如，“购物指南”栏，在鼠标未放到下面导航时为原色，当鼠标移动到上面时，会变颜色，点击会跳转新的页面。

可以看出采用的是表格样式，即是 <table> </table>,外部再加个div标签。

实例代码如下：

<!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=utf-8" /><title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title></head><style type="text/css">#nav{text-decoration:none;color: #5D5D5D;width:1000px;height:195px;}#nav td a{text-decoration:none;color: #C1C1C1; <!-- 导航字体颜色 -->text-align:center;}#nav td a:hover{text-decoration:none;color:#F30; <!-- 鼠标居上字变化体颜色 -->}</style><body ><div align="center"><ul id="nav"><table id="nav" align="center">    <tr>    <td width="150">购物指南</td><br />            <td width="150">配送方式</td><br /><td width="150">支付方式</td><br /><td width="150">售后服务</td><br />            <td width="150">特色服务</td><br />                </tr>                <tr >        <td ><a href="http://www.jd.com" target="_blank" class='nav'>购物流程</a></td>        <td><a href="http://www.jd.com" target="_blank">上门自提</a></td>        <td><a href="http://www.jd.com" target="_blank">货到付款</a></td>        <td><a href="http://www.jd.com" target="_blank">售后政策</a></td>        <td><a href="http://www.jd.com" target="_blank">夺宝岛</a></td>                </tr>                <tr >    <td><a href="http://www.jd.com" target="_blank" >会员介绍</a></td>            <td><a href="http://www.jd.com" target="_blank">211限时达</a></td>            <td><a href="http://www.jd.com" target="_blank">在线支付</a></td>           <td><a href="http://www.jd.com" target="_blank">价格保护</a></td>            <td><a href="http://www.jd.com" target="_blank">DIY装机</a></td>    </tr>                 <tr>    <td><a href="http://www.jd.com" target="_blank">生活旅行/团购</a></td>            <td><a href="http://www.jd.com" target="_blank">配送服务查询</a></td>            <td><a href="http://www.jd.com" target="_blank">分期付款</a></td>           <td><a href="http://www.jd.com" target="_blank">退款说明</a></td>            <td><a href="http://www.jd.com" target="_blank">延保服务</a></td>    </tr>                 <tr >    <td><a href="http://www.jd.com" target="_blank" >常见问题</a></td>            <td><a href="http://www.jd.com" target="_blank">配送费收取标准</a></td>            <td><a href="http://www.jd.com" target="_blank">邮局汇款</a></td>           <td><a href="http://www.jd.com" target="_blank">返修/退换货</a></td>            <td><a href="http://www.jd.com" target="_blank">京东E卡</a></td>    </tr>                <tr >    <td><a href="http://www.jd.com" target="_blank" >大家电</a></td>            <td><a href="http://www.jd.com" target="_blank">海外配送</a></td>            <td><a href="http://www.jd.com" target="_blank">公司转账</a></td>           <td><a href="http://www.jd.com" target="_blank">取消订单</a></td>            <td><a href="http://www.jd.com" target="_blank">京东通信</a></td>    </tr>                 <tr >    <td><a href="http://www.jd.com" target="_blank" >联系客服</a></td>            <td><a href="http://www.jd.com" target="_blank"> </a></td>            <td><a href="http://www.jd.com" target="_blank"> </a></td>           <td><a href="http://www.jd.com" target="_blank"> </a></td>            <td><a href="http://www.jd.com" target="_blank">京东JD+</a></td>    </tr>               </table>        </ul>         </div>    <center><br /><br /><br /><br /><br /><br /><p>Copyright &copy; 2004-2016 京东JD.com 版权所有 <span class="footer-nav-cut"></span></p></center></body></html>

运行结果如下：

0 0