div+css模拟京东导航

来源：互联网发布：2016年养殖业数据编辑：程序博客网时间：2024/06/11 13:28

<html><head><title>测试导航</title><style type="text/css">*{padding: 0px;margin: 0px;}#menu{}#menu li{float: left;list-style: none;}#menu li a{text-decoration: none;font-size: 15px;font-weight: 700;color: white;display: block;height: 40px;line-height: 40px;background: #E43c3e;padding-left:15px;padding-right:15px;text-align: center;}#menu li a:hover{background-color:A40000;}</style></head><body><ul id="menu"><li><a href="">首页</a></li><li><a href="">服装城</a></li><li><a href="">京东超市</a></li><li><a href="">团购</a></li><li><a href="">夺宝岛</a></li><li><a href="">宅家好电视</a></li></ul></body></html>

注意如下几点：

1. 在li中float，因为是li浮动的

2.将li中的a标签变成块状并设定高度，里面字的高度等于a标签的高度

3. 虽然a会继承来自li中设定的属性，但是部分属性无法继承，所以最好的方式是完全自定义a的属性

0 0