html和css写淘宝的快速导航条
目录
1、css代码
2、html代码
1、css代码
<style>* {margin: 0;padding: 0;list-style: none;text-decoration: none;}.nav {width: 900px;height: 40px;background-color: rgb(247, 249, 250);margin: 50px auto;padding-left: 30px;}.nav>li {float: left;width: 100px;text-align: center;}a {color: rgb(82, 82, 83);border-right: 1px solid rgb(90, 88, 88);display: block;width: 100px;height: 20px;margin-top: 10px;text-align: center;}.first {color: red;font-weight: 800;}.two {color: green;font-weight: 800;}a:hover {color: red;}.three {border-right: none;}</style>2、html代码
<ul class="nav"><li><a href="" class="first">天猫</a></li><li><a href="" class="first">聚划算</a></li><li><a href="" class="two">天猫超市</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="" class="three">淘宝直播</a></li></ul>