css如何实现导航切换-创新互联
这篇文章主要介绍了css如何实现导航切换，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联-专业网站定制、快速模板网站建设、高性价比零陵网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式零陵网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖零陵地区。费用合理售后完善，10多年实体公司更值得信赖。
css导航切换效果图如下：
代码如下，复制即可使用：
css实现导航切换
.clothes{width:1170px;margin:0 auto;border-bottom:1px solid red;margin:30px; }
*{padding:0;margin:0;}
li{list-style:none;height:35px;line-height:35px;width:64px;text-align:center;}
a{text-decoration:none;color:#000;text-align:center;font-size:12px;font-family:"微软雅黑";margin-bottom:-1px;}
.clearfix:after{content:"/200b";height:0;display:block;visibility: hidden;clear: both;}
ul li{float:left;border-top:1px solid #ededed;}
a{border-left:1px solid #fff;width:64px;text-align:center;display:inline-block;height:33px;line-height:33px;margin-bottom:1px;}
a:hover{background:#fff;border-top:2px solid red;border-left:1px solid red !important;border-right:1px solid red;
height:34px;line-height:34px;
}
大牌
男装
女装
鞋靴
箱包
内衣配饰
珠宝首饰
奢侈礼品
奢华腕表
感谢你能够认真阅读完这篇文章，希望小编分享的“css如何实现导航切换”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!
网站标题：css如何实现导航切换-创新互联
文章来源：
http://cxhlcq.com/article/pssci.html
重庆分公司
重庆分公司
