HTML简单实现京东商城底部导航
HTML实现京东商城底部导航
京东商城底部截图：
⽐如，“购物指南”栏，在⿏标未放到下⾯导航时为原⾊，当⿏标移动到上⾯时，会变颜⾊，点击会跳转新的页⾯。
可以看出采⽤的是表格样式，即是 <table> </table>，外部再加个div标签。
实例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/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="www.jd" target="_blank" class='nav'>购物流程</a></td>
<td><a href="www.jd" target="_blank">上门⾃提</a></td>
<td><a href="www.jd" target="_blank">货到付款</a></td>
<td><a href="www.jd" target="_blank">售后政策</a></td>
<td><a href="www.jd" target="_blank">夺宝岛</a></td>
</tr>
<tr >
<td><a href="www.jd" target="_blank" >会员介绍</a></td>
<td><a href="www.jd" target="_blank">211限时达</a></td>
<td><a href="www.jd" target="_blank">在线⽀付</a></td>
<td><a href="www.jd" target="_blank">价格保护</a></td>
<td><a href="www.jd" target="_blank">DIY装机</a></td>
</tr>
<tr>
<td><a href="www.jd" target="_blank">⽣活旅⾏/团购</a></td>
<td><a href="www.jd" target="_blank">配送服务查询</a></td>
<td><a href="www.jd" target="_blank">分期付款</a></td>
<td><a href="www.jd" target="_blank">退款说明</a></td>
<td><a href="www.jd" target="_blank">延保服务</a></td>
</tr>
<tr >
<td><a href="www.jd" target="_blank" >常见问题</a></td>
<td><a href="www.jd" target="_blank">配送费收取标准</a></td>
<td><a href="www.jd" target="_blank">邮局汇款</a></td>
<td><a href="www.jd" target="_blank">返修/退换货</a></td>
<td><a href="www.jd" target="_blank">京东E卡</a></td>
</tr>
<tr >
<td><a href="www.jd" target="_blank" >⼤家电</a></td>
<td><a href="www.jd" target="_blank">海外配送</a></td>
<td><a href="www.jd" target="_blank">公司转账</a></td>
<td><a href="www.jd" target="_blank">取消订单</a></td>
<td><a href="www.jd" target="_blank">京东通信</a></td>
</tr>
<tr >
<td><a href="www.jd" target="_blank" ></a></td>
<td><a href="www.jd" target="_blank"> </a></td>
<td><a href="www.jd" target="_blank"> </a></td>
<td><a href="www.jd" target="_blank"> </a></td>
<td><a href="www.jd" target="_blank">京东JD+</a></td>
</tr>
</table>
</ul>
</div>
<center><br /><br /><br /><br /><br /><br />
<p>Copyright © 2004-2016 京东JD 版权所有 <span class="footer-nav-cut"></span></p> </center>
html导航源码</body>
</html>
运⾏结果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。